Question

我正在使用useState挂钩将状态保留在功能组件中，并且想要更新单个值而不必显式设置所有其他属性，所以我认为使用散布运算符可以，但是不行！

这是我的状态：

const [state, setState] = useState({
  data: [],
  currentIndex: 0,
  editMode: false
});

有人可以解释为什么这行不通...

setState({ editMode: value, ...state });

...这样做的时候：

setState({ editMode: value, data: [], currentIndex: 0 });

有什么区别？我可以使用点差运算符还是误解了某些内容？

这里是CodeSandbox example来说明问题。

Answer 1

这与订单有关。考虑以下几点：

const state = {
  data: [],
  currentIndex: 0,
  editMode: false
};
const value = true;

const result = { editMode: value, ...state };
const result2 = { editMode: value, data: [], currentIndex: 0 };
const result3 = { ...state, editMode: value };

console.log(result);
console.log(result2);
console.log(result3);

希望对您有帮助！

Answer 2

做{ editMode: value, ...state }等同于：

{                                   {
  editMode: value,                    
  data: [],                           data: [],
  currentIndex: 0,      ------->      currentIndex: 0,
  editMode: false                     editMode: false
}                                   }

由于键不能在对象中重复，因此最后一个editMode键值对将覆盖第一个，因此将删除第一个editMode: value。相反，您可以先传播：

{...state, editMode: value}

这将用新对象editMode覆盖state中的editMode：

{                                   {
  data: [],                           data: [],
  currentIndex: 0,                    currentIndex: 0,
  editMode: false,      ------->      
  editMode: value,                    editMode: value,
}                                   }

Answer 3

只需颠倒顺序：

setState({ ...state, editMode: value });

否则，您将用旧值覆盖editMode的值。

Answer 4

要使用Object钩子更新useState，请使用以下函数语法：

setState(prevState => ({ ...prevState, editMode: value }));

为什么不传播属性与React useState挂钩一起使用

4 个答案: