问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

react 函数组件 antd Select组件使用labelInValue报错{ value: string | number, label?: ReactNode } 如何解决报错呢？

头像
wswhy3
    204880144

    使用labelInValue想获取value和label，能拿到结果了，但是这个警告报错如何解决

    <Form.Item
  name="companyType"
  label={ initLanguage === 'china' ?  language[1].china : language[1].english}
>
<Select
    labelInValue
    onChange={(value, option) =>
      selectChange(value, option, 'companyType')
    }
    className="w300"
>
{companyData.map((item,index) => {
  return (
    initLanguage === 'china' ? 
    <Option key={index} value={item.key}>{item.value}</Option> :
    <Option key={index} value={item.key}>{item.englishName}</Option>
  )
})}
</Select>
</Form.Item>

    报错：
    Warning: value should in shape of { value: string | number, label?: ReactNode } when you set labelInValue to true

    求过来人。。。

    reactantd
    阅读 2k
    avatarAI BotBETA

    这个警告是因为 Select 组件的 onChange 事件处理函数期望的参数形状是 { value: string | number, label?: ReactNode }，但你可能在处理函数中没有正确地提供这个形状。

    在这个特定的例子中，你的 selectChange 函数需要接收一个 { value, option } 对象作为参数。为了解决这个警告，你需要确保 option 对象包含了 label 和 value 属性，即使你不使用 labelInValue 属性。

    以下是一个可能的 selectChange 函数的实现，它接收一个 { value, label } 对象，并根据 initLanguage 的值来决定显示哪个文本：

    const selectChange = (value, option) => {
    // 这里做你的处理，例如：
    console.log(value, option.label);
};

    如果你不打算使用 labelInValue 属性，你可以简单地忽略这个警告。但是如果你想保留 labelInValue 属性，你就需要确保你的 option 对象有正确的形状。

    注意：在antd的最新版本中，labelInValue属性已被移除。取而代之的是将label作为value的一部分。因此，如果你遇到类似的问题，你可能需要改变你的方法，将label直接放入value中，如下所示：

    const selectChange = (value) => {
    // 这里做你的处理，例如：
    console.log(value);
};

<Select
    onChange={selectChange}
    className="w300"
>
{companyData.map((item,index) => {
  return (
    initLanguage === 'china' ? 
    <Option key={index} value={`${item.key}-${item.value}`}>{item.value}</Option> :
    <Option key={index} value={`${item.key}-${item.englishName}`}>{item.englishName}</Option>
  )
})}
</Select>

    在这个例子中，value是一个字符串，格式为"key-label"。因此，你可以在selectChange函数中直接使用value。

    1 个回答
    得票最新
    头像
    乔治
      12.9k1329
      value={{ value: currentSelectedKey, label: currentSelectedLabel }}
      onChange={(valueObj, option) => {
  // valueObj 把有 value 和 label 属性
  const { value, label } = valueObj;
  selectChange(valueObj, option, 'companyType');
}}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题