useEffect 未触发

Question

我认为我的 useEffect 坏了。

\n\n

我在父组件上

\n\n

 <div className={redactKategori}>\n    <select className="form-control form-control-sm mb-3 mr-2" name="betalt" defaultValue={\'v\xc3\xa4lj kategori\'} onChange={e => { e.preventDefault(); setKate(e.target.value); setRedactKategoris(\'d-block\') }}>\n      <option >valj kategori</option>\n      { Kategori ?\n        Object.keys(Kategori).map(key => {\n          return (\n            <option key={key} value={key}>{key}</option>\n          )\n        }) :\n        null\n      }\n      </select>\n    <div className={redactKategoris}>\n  <EditKat aa={kate} />\n</div>\n

\n\n

并在子组件上

\n\n

function EditKat({ aa }) {\n  let defaultValues = 0\n\n  useEffect(() => {\n    defaultValues = 2\n  }, [aa])\n\n  console.log(defaultValues)\n}\n

\n\n

因此，据我了解，每次${kate}在父组件上获取值时，子组件都会触发挂钩useEffect。但是它不起作用。难道我做错了什么？

\n

Answer 1

经验丰富的行为的原因并不是不起作用useEffect。这是因为函数组件的工作方式。

如果您查看子组件，如果useEffect执行并且组件重新渲染，defaultValues则将设置为0再次，因为函数内部的代码在每个渲染周期上执行。

要解决这个问题，您需要使用 来useState保持本地状态在渲染之间保持一致。

这看起来像这样：

function EditKat({ aa }) {
  // Data stored in useState is kept across render cycles
  let [defaultValues, setDefaultValues] = useState(0)

  useEffect(() => {
    setDefaultValues(2) // setDefaultValues will trigger a re-render
  }, [aa])

  console.log(defaultValues)
}