Блог

#javascript #reactjs #redux #react-redux #react-hooks

#javascript #reactjs #сокращение #реагировать-redux #реагирующие хуки

Вопрос:

 


 const [files, setFiles] = useState(null);
const handleFileUpload = e => {
  setFiles(e.target.files[0]);
  setTimeout(() => {
    console.log(files);
  }, 5000);
}  

 Run code snippetHide results

Expand snippet





  
Изначально я запускал код без setTimeout, но, по-видимому, в первом экземпляре зарегистрированное значение равно null, но состояние обновляется после консоли.выполняется журнал, поэтому я использую setTimeout в качестве запасного варианта для тестирования части кода, поскольку setTimeout является асинхронным и, следовательно, неблокирующим, но все же состояние обновляется только после запуска setTimeout почему, пожалуйста? Что я делаю не так?
Примечание: я только предполагаю, что состояние было обновлено, потому что я установил значение входного файла равным file .назовите так, чтобы сделать state единственным источником истины

Комментарии:

1. Это внутренняя реакция, когда значение состояния будет изменено. Поскольку это асинхронно. когда setState запускает повторный запуск компонента, поскольку ваш тайм-аут все еще находится в текущем цикле рендеринга, он будет выполнен первым, после чего компонент получит повторный запуск.

2. Короткий ответ заключается в том, что настройка состояния в React является асинхронной. Если вы хотите приспособиться к изменениям состояния с помощью перехватов, то используйте перехват useEffect

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

4. Вы бы использовали оба

5. @charlietfl Да, ты прав, я просто использую useEffect для прослушивания изменений состояния, добавляя состояние в мой массив зависимостей