给 react-select 赋值时，Objects are not valid as a React child error

Question

   **Uncaught Error: Objects are not valid as a React child (found: object with keys {label, value, __isNew__}). If you meant to render a collection of children, use an array instead.**

向组件提供 value prop 时出现此错误

这是我从 api 获得的标签数组 [“苹果”，“橙子”，“香蕉”]

这是我的代码

                 <CreatableSelect
                        isMulti
                        name="tags"
                        value={values?.tags?.map((tag, index) => ({
                          value: tag,
                          label: tag,
                        }))}
                        defaultValue={values?.tags?.map((tag, index) => ({
                          value: tag,
                          label: tag,
                        }))}
                        getOptionValue={(option) => option.value}
                        getOptionLabel={(option) => option.label}
                        onChange={(option) => {
                          setFieldValue("tags", option);
                        }}
                    />

Answer 1

如果您检查错误，它会告诉您 Object is not valid child。并改用数组。目前您只是在打印整个对象。

这就是您 onChange 方法的样子：

onChange={(items) => {
  items.forEach((value) =>                                           
  setFieldValue("tags", ...value.value); 
  });
}}

您可以根据需要修改代码。但这是您拥有数组的主要思想，因此您将显示多个元素。

给 react-select 赋值时，Objects are not valid as a React child error

Objects are not valid as a React child error when giving value to react-select

jsx

reactjs

react-select