Question

我定义：

const result = await Promise.all(values.map(async x => doSomething(x)))

..

  const countryCode = "ca";

..

  const [countryKode, setCountryKode] = useState("")

..

 setCountryKode(countryCode)
 console.log(countryKode)  ???? Should it display the value????

为什么不识别“ countryKode”？

  return (
    <div className={classes.root}>
          <h1> Country Code: {countryKode}</h1> ?? says countryKode undefined..??

setCountryKode（countryCode）触发以下错误：为什么会这样？

错误：重新渲染次数过多。 React限制了渲染次数以防止无限循环。感谢您的帮助，

Answer 1

您不应直接在功能组件内部使用setCountryKode，因为它将使您陷入infinitw循环中。您可以在效果内部使用它或在此功能组件内部执行任何功能。您可以按以下步骤进行初始化

const [countryKode, setCountryKode] = useState("ca")

并删除此行

  // setCountryKode(countryCode) ??? TOO MANY RENDERS ..

Answer 2

渲染功能中的设置状态将导致另一个渲染触发。因此，在这种情况下，您的render将调用setCountryKode，这将调用render，将调用setCountryKode，这将调用render，依此类推-等等

为防止这种情况，您应该将countryKode中的countryKode初始设置为useState：

const countryCode = "ca";
const [countryKode, setCountryKode] = useState(countryCode);

甚至：

const [countryCode, setCountryCode] = useState("ca");