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

Question

使用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

求过来人。。。

Answer 1

value={{ value: currentSelectedKey, label: currentSelectedLabel }}

onChange={(valueObj, option) => {  // valueObj 把有 value 和 label 属性  const { value, label } = valueObj;  selectChange(valueObj, option, 'companyType');}}

Answer 2

这个警告是因为 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。