React - 是否在 useEffect 中调用 API答案

【问题标题】：React - API call within useEffect or notReact - 是否在 useEffect 中调用 API
【发布时间】：2021-10-14 07:52:19
【问题描述】：

我很好奇使用 useEffect 钩子处理 API 调用与仅在效果之外处理 API 的区别。

例如，使用useEffect，您可能会执行类似的操作

const MyComponent = () => {
  const [myState, setMyState] = useState([])
  const [trigger, setTrigger] = useState(false)

  useEffect(() => {
    const getData = async () => {
      const callMyApi = await fetch('http://someApi.com')
      setMyState(await callMyApi.json()
    }

    if(trigger) {
      getData()
    }
  }, [trigger])

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

Vs，删除useEffect

const MyComponent = () => {
  const [myState, setMyState] = useState([])

  const getData = async () => {
    const callMyApi = await fetch('http://someApi.com')
    setMyState(await callMyApi.json()
  }

  return (
    <button onClick={getData()}>Click me</button>
  )
}

该代码并不准确。 但关键是，使用钩子，不使用useEffect 处理是否存在陷阱获取数据和更新状态？

【问题讨论】：

标签： reactjs react-hooks fetch use-effect use-state

【解决方案1】：

理想情况下，

如果您想在单击按钮时进行 API 调用，则无需像您所做的那样使用 useEffect 和 useState 之类的任何钩子。您的第二种方法是完美的，没有任何问题。

但是，如果有一些特定的用例需要它，那么使用钩子也没有错，你也只会做一些额外的重新渲染，但如果这对你的用例有用，那么我想这也很好。

注意：

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

这是错误的，这个 setTrigger 函数将在组件挂载时被调用，我猜你可能不希望这样。

你可以这样做

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

或

const MyComponent = () => {
  const [myState, setMyState] = useState([])

  const getData = async () => {
    const callMyApi = await fetch('http://someApi.com')
    setMyState(await callMyApi.json()
  }

  return (
    <button onClick={getData}>Click me</button>
  )
}

【讨论】：

谢谢！我知道代码肯定有错别字。不太担心那部分，主要是好奇是否使用useEffect。潜在的陷阱等。听起来好像真的没有。

【解决方案2】：

您不能使用按钮来激活事件以响应任何可检测到的应用状态变化。要理解这一点，请考虑聊天应用程序的情况，两个客户端 A 和 B 处于活动状态，并且 A 向 B 发送消息，现在在接收到来自 A 的消息时，B 客户端必须采取一些措施，以及 B 如何知道它已收到消息, 为此 B 可以利用事件侦听器。现在您可以自定义创建事件侦听器，但您会为每个不同的事件创建自定义事件侦听器吗？

理想情况下，您可以创建一个通用事件侦听器，用于检测应用程序状态的变化，React 已经为您编写了该事件侦听器。

编写自己的监听器的唯一缺点是浪费时间。

【讨论】：