React 中的异步操作应该依赖于重新渲染吗？

Question

我应该依赖useEffect还是componentDidUpdate执行异步操作，而不是在可能的情况下直接对用户事件做出反应？

假设我需要在用户单击按钮时发送 API 请求，我是否应该强制重新渲染然后发送请求？或者我可以在用户点击时发送请求吗？

const [hasClicked, setClicked] = useState(false)

const [data, setData] = useState({})

useEffect(

  async function fetchSomething() {

    const fetchedData = await API.getData()

    setData(fetchedData)

  }

  fetchSomething()

, [hasClicked])

return (

<div>

  {data.id && <span>{data.id}</span>}

  <button onClick={() => setClicked(true)}>Click me</button>

</div>)

对比

const [data, setData] = useState(null)

async function fetchSomething() {

  const fetchedData = await API.getData()

  setData(fetchedData)

}

return (

<div>

  {data.id && <span>{data.id}</span>}

  <button onClick={fetchSomething}>Click me</button>

</div>)

（假设loading状态是在外部处理的，并且当数据获取已经开始一次时按钮被禁用）

编辑：

我们不想跟踪状态，但是我们看到了这些文章，其中 Dan 建议回调是事件处理程序在内部处理 useEffect

https://overreacted.io/a-complete-guide-to-useeffect/#speaking-of-race-conditions

https://github.com/facebook/react/issues/14326#issuecomment-472043812

Answer 1

如果您需要跟踪用户单击按钮的时间，我只会使用第一个示例。您不需要使用状态来调用异步函数。如果您不打算hasClicked在其他任何地方使用，那么只需使用您的第二个示例。