useEffect not triggering

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

在父代码中创建组件时，尝试在组件上添加一个关键道具

<yourcomponent key="uniquevalue" />

这是因为在大多数情况下，当您的组件被重用时，根据它的创建方式，它通常会通过一些更改来重新渲染它，而不是在重用它时重新创建它，因此不会调用useEffect。例如在SwitchRoute、loops、conditionals中。。。

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

Answer 3

我遇到了同样的问题，我调试了它，发现我直接改变了状态，而不是克隆并使用它。所以，这就是为什么没有触发useEffect。