当我在反应中设置其他对象的状态时，为什么我的数组值会发生变化？

奥姆卡尔·戈达克

const [dataToAdd, setDataToAdd] = useState({
    name: '', gender: '', email: '', imgUrl: '', website: '', skills: ''
});

const handleEnrollClick = () => {
    console.log(skillsAdd.toString())
    setStudentData([...studentData, dataToAdd]);
    setDataToAdd({ name: '', gender: '', email: '', imgUrl: '', website: '', skills: '' });
}

const onChange = (e) => {
    setDataToAdd({ ...dataToAdd, [e.target.name]: e.target.value });
}

let skillsAdd = []
const onChangeRadio = (e) => {
    if (e.target.checked) {
        skillsAdd.push(e.target.value);
    } else if (!e.target.checked) {
        skillsAdd.splice(skillsAdd.indexOf(e.target.value), 1);
    }
    
    console.log(skillsAdd)
    // setDataToAdd({...dataToAdd, skills: skillsAdd.toString()});
}

有 3 个复选框，“JAVA”、“HTML”和“CSS”。“if”和“else if”中的逻辑在“skillsAdd”数组中添加和删除复选框的这些值，即“JAVA”、“HTML”和“CSS”，效果很好。但是当我使用函数'setDataToAdd'设置'dataToAdd'的状态时，'skillsAdd'数组会完全改变。以下是输出：

当'setDataToAdd'被注释并且所有三个复选框，即'JAVA'，'HTML'和'CSS'都被选中时的输出：['java'，'html'，'css']

当'setDataToAdd'没有被注释并且所有三个复选框，即'JAVA'，'HTML'和'CSS'都被选中时的输出：['css']

当写入“setDataToAdd”时，它应该只影响“dataToAdd”，但它正在影响“skillsArray”。这怎么可能？

卡文杜·文迪卡

您需要维护一个单独的状态skillsAdd并使用它来更新dataToAdd状态。

const [dataToAdd, setDataToAdd] = useState({
  name: "",
  gender: "",
  email: "",
  imgUrl: "",
  website: "",
  skills: "",
});

// Use state for skillsAdd array
const [skillsAdd, setSkillsAdd] = [];

const handleEnrollClick = () => {
  console.log(skillsAdd.toString());
  setStudentData([...studentData, dataToAdd]);
  setDataToAdd({
    name: "",
    gender: "",
    email: "",
    imgUrl: "",
    website: "",
    skills: "",
  });
};

const onChange = (e) => {
  setDataToAdd({ ...dataToAdd, [e.target.name]: e.target.value });
};

const onChangeRadio = (e) => {
  const tempSkillsArray = [...skillsAdd];

  if (e.target.checked) {
    tempSkillsArray.push(e.target.value);
  } else if (!e.target.checked) {
    tempSkillsArray.splice(tempSkillsArray.indexOf(e.target.value), 1);
  }

  // update the skillsAdd state
  setSkillsAdd(tempSkillsArray);

  // update dataToAdd using tempSkillsArray
  setDataToAdd({ ...dataToAdd, skills: tempSkillsArray.toString() });
};

// keep console log outside the onChangeRadio function
console.log(skillsAdd);