Question

有一个组件通过存储在状态中的数组进行映射。一个按钮，当它被点击时它更新状态，这个动作正在起作用。

问题是组件也没有更新。

代码如下：

const MyComponent = () => {
   ...
   const [fields, setFields] = useState([{value: 'test', editable: false},
                                         {value: 'test2', editable: false}]);

  ...

  const toggleClass = (id) => {
     const aux = fields;
     aux[id].editable = true;
     setFields(aux);
  }
  ...

  return (
     <div>
      ...
      {fields.map((field, id) => {
          return (
            <div>
              <input className={field.editable ? 'class1' : 'class2'} />
              <button onClick={() => toggleClass(id)}>click</button>
            </div>
          );
      })}
     </div>
  );

我放了日志，状态 (fields) 在点击后更新为 editable = true。但是css类没有改变。

有没有办法解决这个问题？

Answer 1

你需要复制你现有的状态数组，否则你正在改变状态，这是一个不好的做法。

const toggleClass = id => {
  const aux = [...fields]; //here we spread in order to take a copy
  aux[id].editable = true; //mutate the copy
  setFields(aux); //set the copy as the new state
};

Answer 2

发生这种情况是因为您正在改变 fields 的值，这使得 React 无法确定是否更新组件。理想情况下，如果您应该为 setFields 提供一个新对象。因此，您的 toggleClass 函数应如下所示：

const toggleClass = (id) => {
const aux = [...fields]; //This gives a new array as a copy of fields state
aux[id].editable = !aux[id].editable;
setFields(aux);

}

顺便说一句，我还注意到您没有为地图输出的每个 key 分配一个 div 道具。提供 key 属性是一种很好的做法，最好避免使用索引作为键。

React 状态正在更新但组件未更新

2 个答案: