React hooks 在存储对象时会丢失状态

Question

我在我的反应函数组件中使用了板条箱状态

  console.log('reset');
  const [val, setVal] = useState(props.data.bulk_notification.overdue_notification.active);
  const [state, setState] = useState({
    isOverdueActive: props.data.bulk_notification.overdue_notification.active,
    isUpcomingActive: props.data.bulk_notification.upcoming_notification.active,
  });

  console.log(state);
  console.log('val', val);

state 是我想要访问事物的方式，而 val 是我发现的唯一工作方式。

加载组件后我看到

reset

Object { isOverdueActive: false, isUpcomingActive: false }

val false

这些值已按照 props 的预期设置。然后在使用 onClick 事件更改状态后，我看到了

reset 
Object { isOverdueActive: true, isUpcomingActive: false }
val true

reset 
Object { isOverdueActive: false, isUpcomingActive: false }
val true

设置onClick状态的代码是

  setState({ ...state, isOverdueActive: !notification.active });
  setVal(!notification.active);

似乎只有简单的布尔状态会在组件重新渲染中保持不变，而使用传递的道具重置对象。对象有一些特殊的行为吗？对象是否应该在带有反应钩子的状态下使用？

Answer 1

当您的新状态 依赖于先前状态 时，使用应该在setter 中使用回调。 （本例中为 setState）

instead of...
setState({ ...state, isOverdueActive: !notification.active });

I would use
setState(previousState => {
  const newState = { ...previousState, isOverdueActive: !notification.active }
  return newState
  );

当您向 setter 提供函数时，它会接收当前（或先前）状态作为参数。

同时也同意上面的 cmets，显示更多代码会有所帮助。