获取有关对象的错误作为 React 子项无效

Question

对象作为 React 子项无效(找到：带有键 {attributes} 的对象(。如果要呈现子项集合，请改用数组。我检查了解决方案，但找不到你们能帮我导致错误的原因。如果你介意的话，你也可以对这个错误给出一些解释......

const customData = [
{
attributes: {
OBJECTID: 23,
CITY_ID: 1,
CITY_NAME: "NEW YORK",
ILCE_CODE: 1103    
}
},
{
attributes: {
OBJECTID: 36,
CITY_ID: 33,
CITY_NAME: "TORONTO",
ILCE_CODE: 2048
}
}
];
const Form = () => {
const [formData, setFormData] = useState({
firstName: "",
lastName: "",
email: "",
password: ""
});
const [cityData, setCityData] = useState({
value: null,
arrayValue: []
});
const updateFormData = event =>
setFormData({
...formData,
[event.target.name]: event.target.value
});
const selectMultiOption = value =>
setCityData({
arrayValue: value
});
const { firstName, lastName, email, password } = formData;
const { value, arrayValue } = setCityData;
return (
<form>
<input
value={firstName}
onChange={e => updateFormData(e)}
placeholder="First name"
type="text"
name="firstName"
required
/>
some other inputs here...
<Picky
value={arrayValue}
options={customData}
onChange={selectMultiOption}
open={true}
valueKey="CITY_CODE"
labelKey="CITY_NAME"
multiple={true}
includeSelectAll={true}
includeFilter={true}
dropdownHeight={600}
/>
<button type="submit">Submit</button>
</form>
);
};

Answer 1

(一段时间后第一个SO答案，所以如果不符合标准，请提前道歉(

正如 Mihai T 在评论中指出的那样，作为options道具发送到Picky组件的customData变量值似乎存在问题。我自己对 Picky 没有经验，但似乎 propoptions应该是默认情况下的值。将变量customData更改为

customData = [1,2,3]

在我测试时解决了问题。在此处链接到 CodeSandbox(将Picky组件的options道具从customData切换到customData2以查看效果(。

您可能希望在将值的平面列表发送到 Picky 组件之前预处理customData，或者使用 react-picky 文档中描述的"自定义渲染"模式