React：如果 `multiple` 为假，则提供给 <select> 的 `value` 属性必须是标量值

Question

我收到此警告：

Warning: The `value` prop supplied to <select> must be a scalar value if `multiple` is false. Check the render method of `Control`.

我正在使用 React Redux 表单 https://davidkpiano.github.io/react-redux-form/docs/api/Control.html#prop-defaultValue。

数据以对象数组的形式出现，显示在 select 选项元素内。我不想将控件变成多个控件，因为我们只希望用户 select 一个值。

我该如何解决这个警告？

Answer 1

如果指定

multiple={false}

然后您在 select 上提供的任何值都必须是单个值，例如 "apple".

但是，如果您指定

multiple={true}

react 需要一个数组：

value={['apple','orange']}

请参阅 the official documentation for React Forms 中带有 multiple={true} 的 select 示例。

请记住，如果将 multiple 关键字设置为 true，则 React 只会将其添加到呈现的 html 中。因此，您的控件可以将 multiple 属性设置为 false，而不是使用 multi-select.

创建渲染元素

Answer 2

如果你在你的状态下使用一个数组，如果你没有进行多次搜索，它将得到这个错误

如果是简单搜索使用单引号 ''

在useState('')

const [categoria, setCategoria] = useState('')

<select
        onChange={e => setCategoria(e.target.value)}
        value={categoria}
       >
</select>

Answer 3

即使值是数组，我仍然收到此错误，可以通过以下方式解决

value={value || []}

React：如果 `multiple` 为假，则提供给 <select> 的 `value` 属性必须是标量值

React: The `value` prop supplied to <select> must be a scalar value if `multiple` is false

javascript

reactjs

react-redux-form