为什么传播属性不适用于 React useState 钩子

Question

我使用useState钩子将状态保持在一个功能组件中，并且希望在不必显式设置所有其他属性的情况下更新单个值，所以我认为使用spread运算符会起作用，但事实并非如此！

这是我的状态：

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

有人能解释为什么这不起作用吗。。。

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

当这种情况发生时：

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

有什么区别？我可以使用点差运算符吗？或者我误解了什么？

下面是一个CodeSandbox示例来演示这个问题。

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

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

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