Redux Form更新滞后导致API请求payload字段为null如何解决？

Redux 状态更新为批量异步逻辑，调用 dispatch(change(...)) 修改表单值后，当前渲染周期内的 formValues 仍为更新前的旧值，必须等待组件完成下一次重渲染，才能拿到 Store 中更新后的表单值。你在修改值后立刻调用接口，此时取到的还是修改前的 null 值，就会出现 payload 字段缺失的问题。

• 方案1：调用接口时显式计算值，不依赖 Store 实时更新
  调用 getSecuredLoanValues 时直接根据逻辑判断 term 的值，不需要从当前的 formValues 取数：

  const getSecuredLoanValues = async({
    termValue = amount <= SMALL_AMOUNT ? 50 : _get(formValues, 'term', null),
    // 其他参数
  }) => {
    const payload = {
      term_in_months: termValue,
      // 其他字段
    };
    // 接口请求逻辑
  }
  

• 方案2：监听表单值更新后再触发接口
  新增 useEffect 监听 term 字段和触发条件，等 Store 中 term 更新完成后再调用接口：

  useEffect(() => {
    // 补充你业务中需要的其他触发条件
    if (amount <= SMALL_AMOUNT && formValues?.term === 50) {
      getSecuredLoanValues({})
    }
  }, [amount, formValues?.term])
  

• 方案3：修改值时同步传递给接口，不等待 Store 更新
  在设置表单值的同时，把目标值直接传给接口调用，不需要从 formValues 读取：

  useEffect(() => {
    if(amount <= SMALL_AMOUNT){
      const targetTerm = 50
      props.changeFormValue('term', targetTerm);
      getSecuredLoanValues({termValue: targetTerm})
    }
  // 优化依赖项，不要直接传整个props，避免不必要的触发
  }, [props.changeFormValue, amount]);
  

注意：你原 useEffect 依赖项写的是整个 props，会导致 effect 不必要的重复触发，建议只列出实际用到的属性比如 props.changeFormValue 即可。

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