1

Дан код (https://codesandbox.io/s/optimistic-lichterman-fkvfn):

export default function App() {
  const [users, setUsers] = React.useState([]);
  const [number, setNumber] = React.useState(0);

  const fetchUsers = async () => {
    const resp = await fetch("https://api.github.com/users");
    const data = await resp.json();
    console.log("number", number);
    console.log("data", data);
    setUsers(data);
  };

  return (
    <div className="App">
      <button
        onClick={() => {
          setTimeout(() => {
            fetchUsers();
          }, 1000);
        }}
      >
        fetch
      </button>
      <button onClick={() => setNumber(number + 1)}> click </button>
    </div>
  );
}

Если нажать сначала на кнопку вызова fetchUsers, а после сразу несколько раз на кнопку вызова setNumber, то в методе fetchUsers не будет видно изменения в стейте number. Даже если поставить setTimeout для вызова setNumber. Почему так происходит ? Изменения в обычной переменной в функции fetchUsers будет видно, но переменная не подходит, если компонент перерендеривается.

1 ответ 1

0

При вызове fetchUsers через setTimeout - в fetchUsers будет храниться скоуп на момент вызова setTimeout, возможно стоит написать так:

setTimeout(fetchUsers, 1000);

Очень больная тема с setTimeout в реакте, для того чтобы достать текущее валидное значение есть хак: setNumber(number => { // исполняем нужный код с валидным number return number })

1
  • > fetchUsers через setTimeout - в fetchUsers - будет храниться скоуп на момент Но если создать простую переменную и изменить ее до того, как отработает fetchUsers, то в fetchUsers она будет с актуальным значением. Значит ссылка на актуальный scope > чтобы достать текущее валидное значение есть хак - Смысл тут в том, что во время запроса может произойти различные события и изменения в разных частях интефейса. И в асинхронной функции хотелось бы видеть эти изменения и решать, нужно ли менять стейт или нет.
    – Ex1
    23 янв 2021 в 1:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.