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

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

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

customData = [1,2,3]

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

您可能要对customData进行预处理，然后再将平面值列表发送给Picky组件，或者使用react-picky docs

中所述的“自定义呈现”模式

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

1 个答案: