Блог

У меня есть функциональный компонент, управляющий несколькими состояниями, среди прочего состоянием, в котором хранится индекс, с помощью которого я отображаю тип таблицы, при нажатии на подходящую кнопку. При нажатии на эту кнопку вызывается функция обратного вызова, которая запускает обработчик щелчков. Этот обработчик щелчков изменяет состояние индекса на тот же ‘index’, что и запись массива, в котором я храню объект с информацией для рендеринга дочернего компонента.

Я бы ожидал, что onClick состояние изменится до того, как произойдет рендеринг, поэтому компонент может отображаться правильно. Тем не менее, это происходит только на рендеринг позже.

Я уже пытался вызвать useEffect-hook для повторного отображения при изменении состояния индекса, но это тоже не помогло.

Вот сокращенная версия кода:

 export const someComponent = () => {
  [index, setIndex] = useState(-1);
   
  const handleClick = (id) => {
    setIndex(id);
  
    // This is a function, I use to render the table
    buildNewComponent(index);
  }
}
  

Далее «вниз» в коде я получил функцию, которая выполняет рендеринг записей таблицы. Там я передаю реквизит onClick в дочерний компонент таблицы следующим образом:

 <SomeEntryComponent
  onClick={() => handleClick(arrayEntry.id)}
>
// some code which is not affecting my problem
</SomeEntryComponent>
  

Итак, как было сказано: когда срабатывает этот onClick, он сначала отображает компонент при повторном нажатии на него, потому что сначала изменяется состояние.

Кто-нибудь может сказать мне, почему это происходит именно так и как я мог бы исправить это, чтобы оно работало должным образом?

Как указывали другие, это проблема синхронности, когда index обновление происходит после buildComponent вызова.

Но с точки зрения дизайна было бы лучше утверждать index существование по его значению, а не помечать его в обработчике. Я не знаю деталей, стоящих за buildComponent , но вы можете превратить это в условный рендеринг компонента.

Рендеринг вашего компонента становится производным от его данных, в отличие от создания вручную.

 export const someComponent = () => {
    [index, setIndex] = useState(-1);

    const handleClick = (id) => setIndex(id);

    const indexHasBeenSelected = index !== -1
    return (
        <div>
            {indexHasBeenSelected amp;amp; <NewComponent index={index} />}
        </div>
    )
}
  

При вызове buildNewComponent index еще не обновлено. Вы только что вызвали setState, нет гарантии, что значение будет обновлено сразу после этого. Вы могли бы использовать id здесь или вызвать buildNewComponent внутри useEffect, который имеет index в качестве своей зависимости.

Я считаю, что у вас может быть правильное поведение, если вы используете useEffect и отслеживаете index изменения.

 export const someComponent = () => {
  [index, setIndex] = useState(-1);

  useEffect(() => {
    // This is a function, I use to render the table
    buildNewComponent(index);
  }, [buildNewComponent, index])
   
  const handleClick = (id) => {
    setIndex(id);    
  }
}

  

Процесс будет:

1. При щелчке use и вызове handleClick он отправит setIndex новый id
2. index Изменится на то же самое id
3. useEffect Увидит изменение в index и вызовет buildNewComponent .

Одна важная вещь — обернуть buildNewComponent с useCallback , чтобы избежать неожиданного поведения.