Question

我是 React 的新手。我遇到了下一个问题...

在我的功能组件中，我有很多状态，有 2 个具有相同的字段（一个用于辅助操作）

const [fieldsToEdit, setFieldsToEdit] = useState({}); // This one get populated after the first render
const [auxFields, setAuxFields] = useState({.....})

现在，我有一个调用函数的按钮，这个函数只是编辑“fieldsToEdit”，但它也在编辑 auxFields！我意识到在 setState 调用前后编写 console.logs。

const updateEditHandler = (event) => {
  event.persist());


     setFieldsToEdit((prevState) => {
           const { name, value } = event.target;
           if(name === "fecha_presentacion")
              prevState[name] = value;
           else
              prevState[name] = Number(value);
           return ({
              ...prevState
         });
}

我做错了吗？希望你能帮助我。

Answer 1

你不应该改变状态。而是在不修改前一个对象的情况下创建一个新对象。

prevState[name] = value; 
return { ...prevState };

上面首先改变了之前的状态，然后返回了它的一个副本。而是返回一个包含新值的副本，而不修改之前的状态。

return { ...prevState, [name]: value };

上面复制了之前的状态，并使用 name 添加或覆盖（评估的）value 属性。这一切都是在没有改变 prevState 的情况下完成的。

将此应用到您的实际代码中，您将获得以下结果。

setFieldsToEdit((prevState) => {
  const { name, value } = event.target;
  
  if (name == "fecha_presentacion") {
    return { ...prevState, [name]: Number(value) };
  } else {
    return { ...prevState, [name]: value };
  }
});

// or (depending on preference)
setFieldsToEdit((prevState) => {
  let { name, value } = event.target;
  if (name == "fecha_presentacion") value = Number(value);
  return { ...prevState, [name]: value };
});

Answer 2

     setFieldsToEdit((prevState) => {
       const { name, value } = event.target;
       if(name === "fecha_presentacion")
          prevState[name] = value;
       else
          prevState[name] = Number(value);
       return ({
          ...prevState
     });

在 prevState[name] = 你改变状态。如果您不熟悉 lodash，您需要克隆它并使用 lodash deepClone 或 JSON.stringify 然后 JSON.parse 设置它。您没有共享您的代码，因此 useState({.....}) 没有任何意义。但是从我从您的代码中获得的一般图片来看，我认为 fieldsToEdit 和 auxFields 具有相同的引用，因此因为您 prevState[name] = 您正在更改两者尽量不要在任何框架中改变你的状态

setState 钩子改变另一个状态

2 个答案: