useEffect 未触发

Question

我认为我的 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钩子。 但是它不起作用。 难道我做错了什么？

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)
}

Answer 2

在父代码中创建组件时，尝试在组件上添加一个 key prop

<yourcomponent key="uniquevalue" />

这是因为在大多数情况下，当您的组件被重用时，根据它的创建方式，它通常可能会通过一些更改重新渲染它，而不是在您重用它时再次重新创建它，因此不会调用useEffect . 例如在 SwitchRoute、循环、条件...

因此，添加密钥将防止这种情况发生。 如果它在循环中，请确保每个元素都是唯一的，如果找不到更好的唯一键，可以在键中包含索引i 。

Answer 3

我遇到了同样的问题，我对其进行了调试，我发现，我正在直接改变 state 而不是克隆它并使用它。 所以，这就是为什么不触发 useEffect 的原因。