javascript - React.useEffect 在依赖项发生变化时不会触发

Question

编辑:我找到了解决办法!请参阅下面我的回答。

所以本质上，我有一个正在更新但不触发将其作为依赖项的 useEffect 的状态片段:

const [editableParticipants, setEditableParticipants] = useState(*initial value*);
const [joinLeftTimeState, setJoinLeftTimeState] = useState(*initial value*);

function addParticipant(newParticipant) {
  setEditableParticipants([
    ...editableParticipants,
    newParticipant
  ])
}

useEffect(() => {
  setJoinLeftTimeState(
    editableParticipants.map(*mapping stuff*)
  );
}, [editableParticipants]);

当 addParticipant 被触发时，editableParticipants 正在成功更新，但效果并未运行，使 joinLeftTimeState 没有新参与者的条目。我在效果本身中放置了一个控制台日志，它在 addParticipant 运行后根本不会触发。什么鬼？

Answer 1

所以这里的问题有点复杂，但我会尽力总结一下。

本质上，渲染器试图在 joinLeftTimeState 上为在效果触发之前添加的参与者执行 .find(editableParticipants 已更新，但 joinLeftTimeState 尚未更新)，导致一切碰撞。如果 .find 变为空，则添加默认值允许代码继续进行，现在效果正确触发。

function Table() {
  const [editableParticipants, setEditableParticipants] = useState(*initial 
  value*);
  const [joinLeftTimeState, setJoinLeftTimeState] = useState(*initial value*);

  function addParticipant(newParticipant) {
    setEditableParticipants([
      ...editableParticipants,
      newParticipant
    ])
  }

  useEffect(() => {
    setJoinLeftTimeState(
      editableParticipants.map(*mapping stuff*)
    );
  }, [editableParticipants]);

  return editableParticipants.map(
    ptcpnt => <Row joinLeftTimeState={joinLeftTimeState} participant={ptcpnt} />
  )
}

function Row({ joinLeftTimeState, participant }) {
  const defaultTimes = { a: '', b: '' };
  const userTimes = joinLeftTimeState.find(
    ptcpnt => ptcpnt.id === participant.id
  )
  const { a, b } = userTimes || defaultTimes;

  return (*stuff*)
}

异步状态更新的乐趣，对吗？感谢所有的想法!