Реагируйте - Как делать сетевые запросы внутри setState, мой код в порядке?

Question

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

this.setState((prevState: State) => {

      if (prevState.condition1) {
        return { message: "welcome"  };
      }

      if (prevState.condition2) {
        fetch(`http://someurl`)
          .then(data => data.json())
          .then(jsonData => {
             this.setState({ message: jsonData.message });
          });
      }
      return null;
    });

Это то, что у меня есть на данный момент. Я обеспокоен тем, что до завершения выполнения обещания могут произойти какие-либо другие обновления состояния, поскольку оно «не ожидается». Я не могу использовать await в setState, так что это не вариант. Любой совет с благодарностью.

Answer 1

Вместо того, чтобы делать вышеописанное, почему бы вам не сделать это следующим образом.

  if (condition1) {
    this.setState((prevState: State) => ({ message: "welcome }))
  }

  if (condition2) {
    fetch(`http://someurl`)
      .then(data => data.json())
      .then(jsonData => {
         this.setState({ message: jsonData.message });
      });
  }

• Обернуть его в функцию
• Вы можете сделать функцию асинхронной / ожидающей

Как показано ниже

const myFunction = async () => {
   if (condition1) {
      // ..condition1 code here ..
   }
   if (condition2) {
     try {
       const data = await fetch(`http://someurl`);
       const dataJSON = await data.json();
       this.setState({ message: dataJSON.message });
     } catch (error) {
       console.log(error);
     }
   }
}

• Преимущества: Это делает код более читабельным и облегчает отладку в будущем.Менее вложенные:)

Answer 2

Вам не нужно устанавливать setState внутри функции обратного вызова setState, вам просто нужно вернуть обновленное состояние. то есть

this.setState((prevState: State) => {

      if (condition1) {
        return { message: "welcome"  };
      }

      if (condition2) {
        fetch(`http://someurl`)
          .then(data => data.json())
          .then(jsonData => {
             return { message: jsonData.message };
          });
      }
      return null;
    });

Хотя это не рекомендуемый способ. Старайтесь избегать вызовов внутри setState, поскольку это затрудняет чтение кода.