使用 fetch API 获取数据和 setState 时反应 useEffect 循环多次

Question

为什么会多次触发fetchData？ console.log 似乎几乎无限循环？我如何让它只运行一次 onload 并在以后调用fetchData() 时只触发一次？我在这里做错了什么或错过了什么？

const [data, setData] = useState(null);

  let fetchData = React.useCallback(async () => {
    const result = await fetch(`api/data/get`);
    const body = await result.json();
    setData(body);
    console.log(data)
  },[data])

  useEffect(() => {
    fetchData();
  },[fetchData]);

更新（附加问题）：如何在return() 之前等待data 填充现在下面的这个现在给出了错误，因为它一开始是空的？：data.map is not a function

return (
    <select>
        {data.map((value, index) => {
            return <option key={index}>{value}</option>
        })}
    </select>
)

Answer 1

在useCallback 挂钩中，您将data 作为依赖项传递，并同时通过调用setData 更改回调中的数据值，这意味着每次更改fetchData 的数据值时都会重新初始化。

在useEffect 钩子中fetchData 是一个依赖项，这意味着每次fetchData 更改useEffect 都会被触发。这就是你得到一个无限循环的原因。

因为你想在组件挂载时获取一次数据，所以我认为useCallback在这里是不必要的。无需记忆函数fetchData。

解决方案

const [data, setData] = useState(null);

useEffect(() => {
  const fetchData = async () => {
    try {
     const result = await fetch(`api/data/get`);
     const body = await result.json();
     setData(body);
    } catch(err) {
      // error handling code
    } 
  }

  // call the async fetchData function
  fetchData()

}, [])

如果您想在 data 的值更改时记录它，您可以使用另一个 useEffect 来代替它。例如，

useEffect(() => {
  console.log(data)
}, [data])

附： - 也不要让承诺得不到处理，请使用try...catch 块来处理错误。我已更新解决方案以包含 try..catch 块。

编辑 - 附加问题的解决方案 有两种可能的解决方案，

因为您希望 data 的值在 API 调用之后是一个数组，所以您可以将 data 的值初始化为一个空数组，例如，

const [data, setData] = useState([]);

但是如果由于某种原因您必须将data 的值初始化为null。以下是如何呈现从 API 调用返回的信息。

// using short-circuit evaluation
return (
    <select>
        {data && data.length && data.map((value) => {
            return <option key={`select-option-${value}`}>{value}</option>
        })}
    </select>
)


// using a ternary
return (
   <div>
    { data && data.length
       ? (<select>
            {
              data.map(value => <option key={`select-option-${value}`}>{value}</option>)
            }
           </select>
         )
       : <div>Data is still loading...</div>
    }
   </div>
)

不要将indexes 用作key，使用独特的东西作为键。