更新子组件上下文时重置所有组件状态问题排查

问题根源 #

你给每个复选框组件单独用本地useState(false)维护选中状态，但这个本地状态和上下文里的selectedDocuments完全脱节：

• 当上下文的选中列表更新时，所有消费该上下文的组件都会触发重渲染，但本地的isSelected不会自动跟着上下文的新数据更新；
• 如果组件是通过循环生成（比如在map里），一旦key值设置不当导致组件重新挂载，isSelected会直接回到初始的false，彻底打乱选中状态。

解决办法 #

删掉本地的isSelected状态，直接从上下文的selectedDocuments中推导当前卡片的选中状态，让状态完全由上下文统一管理：

const { selectedDocuments, setSelectedDocuments } = useContext(Context);

// 直接通过上下文的选中列表判断当前卡片是否被选中
const isSelected = selectedDocuments.some(doc => doc.data.id === card.data.id);

const onSelect: React.ChangeEventHandler<HTMLInputElement> | undefined = (e) => {
  if (isSelected) {
    setSelectedDocuments((docs) =>
      docs.filter((doc) => doc.data.id !== card.data.id)
    );
  } else {
    setSelectedDocuments((docs) => [...docs, card]);
  }
};

为什么这样有效 #

修改后，isSelected的值完全依赖上下文的selectedDocuments，每次组件重渲染都会重新计算这个值，不管上下文怎么更新，当前组件的选中状态都会和全局选中列表保持一致，自然不会出现状态被重置的问题。

内容的提问来源于stack exchange，提问作者ysjodha