react異步更新state hook

Question

我試圖在異步 function 中設置由useState生成的 state，但我發現如果我這樣做，React 會無限渲染我的組件。

這是我做的demo

export const App = () => {
    const [nodes, setNodes] = useState([])

    // some async refresh code, like http request, like axios.get("/list-nodes").then ...
    const refresh = async () => {
        let arr = []
        for (let i = 0; i < 10; i++) {
            arr.push(Math.random())
        }
        setNodes(arr)
    }

    refresh();


    return (
        <div>
            {
                nodes.map(v =>
                    <div>
                        value: {v}
                    </div>)
            }
        </div>
    )
}

在代碼中，渲染在不斷發生，數字也在不斷變化。

請問我如何能夠在異步 function 中正確設置 state？

Answer 1

您需要使用 useEffect 掛鈎來僅在第一次渲染時獲取數據。 如果不是，組件在每次渲染時獲取，每次更新 state 時都會發生，這會渲染組件...

export const App = () => {
    const [nodes, setNodes] = useState([]);

    useEffect(()=>{
      //Self calling async function
      //Be carefull to add a ; at the end of the last line
      (async () => {
        let data = await fetch(url)
        let json = await data.json()
        setNodes(data)
      })()
    },[])

    return (
      <div>
      {  nodes.map(node => <div>Value: {node}</div>)  }
      </div>
    )
}

Answer 2

你可以使用 useEffect

 export default function App() {
  const [nodes, setNodes] = useState([]);
  const refresh = async () => {
  let arr = [];
   for (let i = 0; i < 10; i++) {
     arr.push(Math.random());
   }
   setNodes(arr);
 };
useEffect(() => {refresh(); }, []);

return (
<div className="App">
  {nodes.map((v) => (
    <div>value: {v}</div>
  ))}
 </div>
);}