javascript - 获取有关对象的错误作为React子元素无效

对象作为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>
  );
};

最佳答案

（一会儿先回答一下，如果不符合标准，请提前道歉）

正如Mihai T在评论中指出的那样，您的customData变量值似乎是个问题，该变量值作为options道具发送到Picky组件。我自己没有Picky的经验，但是如果默认情况下的值出现，则prop options似乎应该是一个平面列表。将变量customData更改为

customData = [1,2,3]

测试时可以解决问题。链接到CodeSandbox here（将options组件的Picky道具从customData切换到customData2以查看效果）。

您可能想要在将平面值列表发送到Picky组件之前进行预处理，或者使用react-picky docs中描述的“自定义呈现”模式