关于在 React 上使用钩子排队状态更改的问题

Question

所以，我开始通过做类组件来学习 React。 在那里，据我所知，我在做什么，如果我有一个

this.state = {
  isLoading: false,
  dataToRender: [],
}

this.setState({ isLoading: true }, async () => {
 const data = await fetchData();
 this.setState({ dataToRender: data , isLoading: false });
})

const message => <p>loading...</p>

if (isLoading) return message();

return (
 dataToRender.map
)

为了在我为新数据调用 API 时显示“正在加载”消息，我可以知道 setState“队列”将按顺序执行。 外部 setState 将接收第一个参数的第一个状态更改和一个在其后作为第二个参数立即执行的函数。

问题是我在用钩子实现这一点的方法上有点困难。 我假设做

const [isLoading, setIsLoading] = useState(false);
const [data, setData] = useState([]);

setLoading(async () => {
  setLoading(true)
  const data = await fetchData()
  setData(data);
  return false;
})

行不通，对吧？ 我觉得以某种方式使用钩子时，构建这种组件逻辑的整体逻辑可能会有所不同……如果有人至少能指出我的概念方向，那就太好了。 谢谢！ :)

Answer 1

useState的 dispatch 函数没有回调。

  const fn = async () => {
    setIsLoading(true)
    const data = await fetchData()
    setData(data)
    setIsLoading(false)
  })

上述函数通常在onClick或useEffect等事件上调用。

Answer 2

作为useState状态更新函数传递的函数被视为同步函数，因此您可以有效地将隐式返回的 Promise 对象保存到状态中。

您应该做的是将异步逻辑分解为从事件处理程序调用的函数（如onClick ）或在组件生命周期中调用的函数（如useEffect 。

const [isLoading, setIsLoading] = useState(false);
const [data, setData] = useState([]);

const asyncCall = async () => {
  setLoading(true);
  try {
    const data = await fetchData();
    setData(data);
  } catch(error) {
    // handle any errors, logging, etc...
  } finally {
    setLoading(false);
  }
};

这将按照入队的顺序调用/入队每个状态更新。 您还应该在try/catch块中包含任何异步逻辑，以便您可以处理任何被拒绝的承诺，在finally清除加载状态，以便无论已解决/拒绝的承诺如何，当代码完成时，它都会重置加载状态。

Answer 3

取决于 Kent React 通常对这些调用进行批处理，因此您只能获得一次重新渲染，但它无法在异步回调中执行此操作（例如我们的 promise 成功和错误处理程序）。 您可以使用对象作为 useState 的值或使用 useReducer。

const [state,setState]=useState({isLoading:false,success:false,isError:false,data:[]})

然后在每个状态上设置这些属性。