在状态更改（由 useState 的更新程序）成功应用后，我如何运行某些代码？

Question

我有一个选择框，其中包含客户列表和该客户的车辆列表，显示在选择框下方。当Selectbox中的客户更改时，我需要更新车辆列表，并显示加载程序，直到我们从服务器中获得了新车辆的响应。 vehicles === null（车辆未装载）时显示装载机。

这是我的代码：

  const [vehicles, setVehicles] = useState(null);

  useEffect(() => {
    // setting vehicles to null to show the loader
    setVehicles(null);
    axios
      .get(`/vehicles?customerId=${customer.id}`)
      .then((response) => setVehicles(response.data));
  }, [customer]);

它工作得很好，但我不确定在不先确保 vehicles 实际上已设置为 null 的情况下触发请求是否安全。在 setVehicles(response.data) 覆盖状态之后 setVehicles(null) 以某种方式被执行在理论上不会发生吗？

如果是这样，我该如何处理这种情况？我找不到向 setVehicles 提供 .then 或向其传递回调的方法，就像使用基于 class 的组件一样。我可能可以在客户更改时调用 setVehicles(null) 而无需触发请求，然后让另一个 useEffect 监视对 vehicles 的更改，并在 vehicle 收到时触发加载车辆的请求设置为 null。但这感觉不必要地复杂，所以我想知道是否有更好的方法来做到这一点？或者我是否可以保留代码，因为它希望因为 setVehicles(null) 首先被安排，所以它的状态应该总是在 setVehicles(response.data) 之前应用？

非常感谢！

Answer 1

您可能在同一 useEffect 中出现连续 setState 的竞争条件。为了避免这个问题，你确实必须分解并创建另一个 useEffect，你无法逃避。

不过，根据您的示例，竞争条件不会真正发生。您有一个 setState 仅在 http 请求解析后触发，这需要一些时间。第二次状态更新实际上无法击败立即触发的第一次状态更新。

在状态更改（由 useState 的更新程序）成功应用后，我如何运行某些代码？

How can I run certain code after the change (by useState's updater) to state has been applied successfully?

callback

reactjs

react-hooks

在状态更改（由 useState 的更新程序）成功应用后，我如何 运行 某些代码？

How can I run certain code after the change (by useState's updater) to state has been applied successfully?

callback

reactjs

react-hooks

在状态更改（由 useState 的更新程序）成功应用后，我如何运行某些代码？