Question

我是 react.js hook 的新手。不知道为什么下面的代码不起作用。

import React,{useEffect,useState} from "react"

function App() {

  const [fruit,setFruit] = useState("orange");
  setFruit("apple")      
  
  return (
    <div>
      <h1>{fruit}</h1>
    </div>
  );
}

export default App;

错误说明

Too many re-renders. React limits the number of renders to prevent an infinite loop.

Answer 1

您正在功能组件主体内设置状态（setFruit("apple") 行），这将导致组件重新渲染，当发生这种情况时，所有组件主体将再次重新运行，这将导致另一个设置状态调用以此类推，最终导致无限循环。

如果你想在组件挂载时设置状态，你可以使用 useEffect 钩子来实现：

useEffect(() => {
  setFruit("apple")
}, []);

阅读有关钩子 here 的更多信息。

Answer 2

你需要使用useEffect

useEffect(() => {
 setFruit("apple") 
}, [])

Answer 3

react 的实际模式是，当您设置状态时，它会导致重新渲染，这意味着组件重新运行并重新编译每一行代码，如果它再次找到设置状态功能，则重新渲染，这就是您代码中发生的情况。为了防止这种情况，您可以使用接受回调函数和依赖数组的 useEffect 钩子

例如

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

每个 useEffect 中的代码将在第一次组件挂载时运行，如果你想再次运行代码，你需要在 useEffect 的第二个参数中传递依赖，它决定如果依赖改变它的值，useEffect 中的代码将再次运行.

在你的情况下，你可以像这样设置状态

useEffect(() => {
   setFruit("apple")
}, []);

react.js hook（重新渲染太多）

3 个答案: