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