Неопределенные данные после того, как ответ Json вводится в состояние [] в ReactJS

Question

У меня здесь проблема, а именно, когда я использую Post API и добавляю console.log (response Json), появляются данные и их содержимое (app_uid и app_number). Но когда я ввожу данные API в состояние dataApp [] и пробую console.log (this.state.dataApp), данные не появляются.

Вот фрагмент сценария из его функции API публикации:

 onTask = (pro, tas) => {
        fetch('https://bpm.***********.or.id/api/1.0/**********/cases/', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept-Encoding': 'gzip, deflate',
            'Authorization': 'Bearer ' + this.state.token,
          },
          body: JSON.stringify({
            'pro_uid': pro,
            'tas_uid': tas,
          }),
        })
        .then((response) => response.json())
        .then((responseJson) => {
          console.log(responseJson); //here the data appears
          this.setState({
            dataApp: responseJson,
          });
          console.log(this.state.dataApp); //but here does not appear any data
        });
      

Надеюсь, я найду здесь решение, большое спасибо.

Answer 1

setState () - это вызов asyn c в React. Таким образом, вы вряд ли получите обновленное значение состояния в следующей строке. Вам необходимо использовать обработчик обратного вызова , чтобы получить обновленное значение.

 onTask = (pro, tas) => {

        //Code you need to add
         var that = this;
         
        fetch('https://bpm.***********.or.id/api/1.0/**********/cases/', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept-Encoding': 'gzip, deflate',
            'Authorization': 'Bearer ' + this.state.token,
          },
          body: JSON.stringify({
            'pro_uid': pro,
            'tas_uid': tas,
          }),
        })
        .then((response) => response.json())
        .then((responseJson) => {
          console.log(responseJson); //here the data appears
         that.setState({
            dataApp: responseJson,
          }, () => {
    console.log("dataApp: ", that.state.dataApp);
   });
  });

Answer 2

this.setState - асинхронная функция.

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

Попробуйте следующее:

this.setState({
  dataApp: responseJson,
}, () => console.log(this.state.dataApp)); // console.log inside a callback

Чтобы понять, почему это работает внутри обратного вызова, а не в следующей строке, взгляните на эту статью MDN и эту Документация React