为什么当我在反应中设置其他对象的状态时我的数组值正在改变？

Question

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'。这怎么可能？

Answer 1

您需要为 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);

为什么当我在反应中设置其他对象的状态时我的数组值正在改变？

Why my value of array is changing when I'm setting state of other object in react?

reactjs

checkbox

react-hooks

onchange

use-state