时间戳

首页 > 解决方案 > useEffect 未触发

reactjs - useEffect 未触发

问题描述

我认为我的 useEffect 坏了。

我在父组件上有

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

在子组件上

function EditKat({ aa }) {
  let defaultValues = 0

  useEffect(() => {
    defaultValues = 2
  }, [aa])

  console.log(defaultValues)
}

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

标签： reactjsreact-hooks

解决方案

经验丰富的行为的原因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)
}

推荐阅读