Почему не работает useState при клике?

Question

[Сергей]

Почему не срабатывает setChosenPicture?
chosenPicture выдает пустую строку даже если его поставить в setTimeout после setChosenPicture

const [chosenPicture, setChosenPicture] = useState('');


const handleShowFloatingPicture = (index, fileName, width, height, element) => {
     setChosenPicture(fileName);
     setTimeout(() => {
                console.log(chosenPicture);
     }, 5000);
}

...
       return (
                    <Picture
                        onClick={(e) =>
                            handleShowFloatingPicture(index, item.fileName, item.width, item.height, e)
                        }
                    />
                );
            }

Comments

[Kentavr16]

А что у вас в picrure?

Answer 1

[abberati]

Он работает. Он асинхронный. В документации про это написано. Если ты хочешь что-то делать с новым значением стейта, то это что-то ты должен делать в useEffect

А в тайм-ауте не меняется из-за замыкания. Это константа. Она никогда не поменяется в замыкании. Никогда.

Comments

[Сергей]

А можете привести пример как использовать это с useEffect? Ну т е по клику я хочу получить chosenPicture и использовать его дальше в коде. Как я понял его можно получить только в useEffect, но как это сделать не пойму.

[Дмитрий Воробьев]

Что за бред?

Он работает. Он асинхронный. В документации про это написано. Если ты хочешь что-то делать с новым значением стейта, то это что-то ты должен делать в useEffect

Получается что без useEffect нельзя использовать измененный state? Интересно почему? Вот документация о useState
где в ней говориться о совместном использовании с useEffect()?

А в тайм-ауте не меняется из-за замыкания. Это константа. Она никогда не поменяется в замыкании. Никогда.

Чувак что ты куришь, дай мне тоже... Посмотри внимательнее

setTimeout(() => {
                console.log(chosenPicture);
     }, 5000);

Ты setTimeout константой считаешь?(Тогда почему она вызываеться?)
Или chosenPicture (но разве он ее меняет?)

[abberati]

Получается что без useEffect нельзя использовать измененный state?

Всё верно. Потому что setState асинхронный, да и язык так работает, что нельзя изменить константу

const [state, setState] = useState(0);
     //^^^^^ – константа, её значение – 0

const onClick = () => {
  console.log(state)
           // ^^^^^ – константа её значение – 0
  setState(1) // при следующем рендере компонента (и при следующем объявлении константы) значение константы будет равно единице
  console.log(state)
           // ^^^^^ – константа, её значение – всё ещё 0
  setTimeout(() => {
    console.log(state)
             // ^^^^^ – константа, полученная через замыкание, созданное лексическим контекстом функции onClick, её значение всегда будет 0
  }, 10 * 1000 * 1000)
}

useEffect(() => { // функция будет вызвана при каждом рендере, при условии, что на прошлом рендере значение state отличалось от текущего
  console.log(state)
           // ^^^^^ – на первом рендере (до клика) – 0
           //         на втором рендере (из-за клика изменился стейт, происходит ререндер) – 1
}, [state])

Answer 2

[Yustas Alexu]

setChosenPicture(fileName);
     setTimeout(() => {
                console.log(chosenPicture);
     }, 5000);

Этот код не будет работать как вы хотите. Стейт не меняется мгновенно, новое значение будет в следующей итерации рендера, проще говоря при следующем вызове функции-компонента.
Я не знаю, что вы хотите сделать с chosenPicture, но вывести значение в консоль вы можете так:

const [chosenPicture, setChosenPicture] = useState('');

console.log(chosenPicture) // после обновления стейта в консоль выведется новое значение

const handleShowFloatingPicture = (index, fileName, width, height, element) => {
     setChosenPicture(fileName);
     setTimeout(() => {
                console.log(chosenPicture); // здесь старое значение, потому что функция вызвалась только один раз
                // и на момент вызова там была пустая строка
     }, 5000);
}

Сделать что-то со значением можно через useEffect:

const [chosenPicture, setChosenPicture] = useState('');

useEffect(() => {
  if (chosenPicture) {
    console.log(chosenPicture)
  }
}, [chosenPicture]) // это массив завимостей, useEffect  вызывает свой коллбэк каждый раз при изменении завимостей

const handleShowFloatingPicture = (index, fileName, width, height, element) => {
     setChosenPicture(fileName);
}