React.js：调用函数前重置hook状态不生效的问题如何解决？

React的useState返回的状态更新函数是异步批量执行的，你在调用setRealmFilter(null)之后，当前函数作用域内的realmFilter还是本次渲染时拿到的旧值，所以紧接着调用sortEntities读取到的自然是重置前的数值，要等到下一次组件重渲染后realmFilter才会更新为最新的null值。这就是为什么第二次点击的时候才能拿到正确值——第二次点击时组件已经完成了重渲染，realmFilter已经是上一次更新后的null了。

方案1：直接给sortEntities传参（改造成本最低） #

修改sortEntities支持接收筛选值作为入参，重置时直接把目标值null传入，不需要等待状态更新完成：

// 调整参数，默认值还是用当前的realmFilter，不影响其他地方的原有调用逻辑
const sortEntities = (targetFilter = realmFilter) => {
  const search = targetFilter !== null ? targetFilter : anotherVariable
  // 原有API请求逻辑不变
}

const handleFormReset = e => {
  e.preventDefault();
  setRealmFilter(null);
  // 直接传入需要的目标值，不用等待状态更新生效
  sortEntities(null);
}

方案2：用useEffect监听状态变化触发请求（逻辑更解耦） #

把sortEntities的触发和realmFilter的更新绑定，只要realmFilter发生变化就自动执行请求，不需要手动在状态更新后调用：

export const MyPage = (props) => {
  const [realmFilter, setRealmFilter] = useState(null);

  const sortEntities = () => {
    const search = realmFilter !== null ? realmFilter : anotherVariable
    // 原有API请求逻辑不变
  }

  // 新增useEffect，监听realmFilter变化后自动调用sortEntities
  useEffect(() => {
    sortEntities()
  }, [realmFilter])

  const handleFormReset = e => {
    e.preventDefault();
    // 只需要更新状态，后续请求会由useEffect自动触发
    setRealmFilter(null);
  }

  // 其余代码保持不变
}

两个方案都可以解决你的问题，如果你其他地方也有零散手动调用sortEntities的需求，方案1更合适；如果所有sortEntities的调用都是跟随realmFilter变化触发的，方案2逻辑更清晰，不容易出现漏调的问题。

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