使用useState挂钩将元素推送到数组

Question

我正在尝试在useState中推送新标签

const [mydata, setData] = useState({
    user_gender: "",
    user_relationship: "",
    user_birth_day: "",
    user_birth_month: "",
    user_gender_interest: "",
    user_birth_year: "",
    tags: []
  });

const handleAddChip = chip => {
    setData({
      ...mydata,
      tags: chip
    });
  };

Answer 1

使用updater和useState提供的setter的concat版本返回一个新数组，而不是push

const handleAddChip = chip => {
    setData(previousData =>({
       ...previousData,
       tags: previousData.tags.concat(chip)
     }));
};

您也可以在没有更新程序版本的情况下执行此操作，但这通常不是一个好主意。

setData({...myData, tags: myData.tags.concat(chip)})