React Context两次更新导致消费组件重复发起API调用如何解决？

方案1：从根源合并Context更新（最优） #

调整HeaderComponent中的Context赋值逻辑，避免无意义的两次更新：

• 优先读取本地Cookie值，如果Cookie存在直接用Cookie值更新Context，无需等待API返回
• 如果Cookie不存在，再使用API请求返回的结果更新Context
  从根源上避免Context被连续修改两次，自然不会触发子组件的重复请求。

方案2：新增Context加载完成标记（次优，适用于必须两次更新的业务场景） #

如果业务逻辑要求必须先走API请求，再用Cookie值覆盖结果，可以给Context新增isContextReady布尔状态位：

• HeaderComponent中完成两次赋值操作后，才将isContextReady设置为true
• SomeComp1中仅在Context加载完成后再发起请求，修改后代码如下：

const [contextData] = React.useContext(MyContext);

// 可省略本地stateString1状态，直接使用Context值减少不必要的状态同步
useEffect(()=>{
  // 仅当Context加载完成且参数存在时才发起请求
  if (!contextData.isContextReady || !contextData.stateString1) return
  const url = `http://someURL/${contextData.stateString1}`;
  fetch(url);
}, [contextData.stateString1, contextData.isContextReady])

方案3：子组件加防抖兜底（适配上层逻辑无法修改的场景） #

如果无法修改Context相关的上层逻辑，可以在SomeComp1的请求逻辑上加短时间防抖，300ms内的多次参数变化仅触发最后一次请求：

const [contextData] = React.useContext(MyContext);

useEffect(()=>{
  if (!contextData.stateString1) return
  const timer = setTimeout(() => {
    const url = `http://someURL/${contextData.stateString1}`;
    fetch(url);
  }, 300)
  // 组件卸载或参数变化时清除上一次的定时器
  return () => clearTimeout(timer)
}, [contextData.stateString1])

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