如何基于外部对象切换React内部状态对象的属性值？

需求逻辑回顾 #

• 当externalValues.valueOne为true时，将internalStatus.statusOne设为true
• 当externalValues.valueTwo为true时，将internalStatus.statusTwo设为true，同时强制statusOne为false

原代码问题分析 #

1. 未监听状态变化：useEffect依赖为空数组，仅在组件初始化时执行一次，无法响应externalValues的后续变更
2. 错误修改状态：直接操作internalStatus而非使用状态更新回调的prevValue，违反React状态不可变原则
3. 逻辑不符合需求：简单取反的逻辑无法实现valueTwo优先级更高的规则

修正后的代码 #

const externalValues = {
  valueOne: false,
  valueTwo: false
};

const [internalStatus, setInternalStatus] = useState({
  statusOne: false,
  statusTwo: false
});

useEffect(() => {
  setInternalStatus(prevStatus => {
    // valueTwo优先级更高，优先判断
    if (externalValues.valueTwo) {
      return {
        statusOne: false,
        statusTwo: true
      };
    }
    // valueOne为true时，仅更新statusOne为true，statusTwo保留原状态（若需重置为false可直接修改）
    if (externalValues.valueOne) {
      return {
        ...prevStatus,
        statusOne: true
      };
    }
    // 两个值都为false时，保留原有状态
    return prevStatus;
  });
}, [externalValues]);

可选调整 #

若希望当externalValues两个值都为false时，将internalStatus重置为全false，可修改useEffect中的最后返回逻辑：

// 替换原return prevStatus;
return {
  statusOne: false,
  statusTwo: false
};

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