SetState не устанавливает переменную состояния React

Я пытаюсь установить переменную состояния для данных ответа от вызова API, но не могу этого сделать. У меня есть массив делений в responseJson, который я пытаюсь установить в массив делений в состоянии. Я получаю значения responseJson в console.info, но когда я пытаюсь установить setState({...this.state,divisions:responseJson.division}), я не получаю никаких данных на консоли.

состояние

    this.state = {
    token: data.token,
    role: data.role,
    userId: data.userId,
    organizationId: data.organizationId,
    organizationName: data.organization_name,
    workspacePP: false,
    workspaces: [],
    divisions:[],
    addWorkspace: null,
    isDivisionViewable:false,
    divisionName:null

};

функция addDivision

 addDivision=()=> {

 const uri = `${APPURL}/workspace/division/create`;
 console.info('dddddd',this.state)
  fetch(uri, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${this.state.token}`
    },
    body: JSON.stringify({
              workspace_id: this.state.workspaces[0].workspace_id,
              organization_id: this.state.organizationId,
              division:this.state.divisionName
        }),
    }).then((res)=>res.json()).then(responseJson=>{

          if (!responseJson.status){
            message.error(responseJson.error);
            return;
          }
          console.info('dddd',responseJson);

          this.setState({...this.state,divisions:responseJson.division})

    })
    console.info(this.state)//returns empty array
  }

ответJson

{status: true, division: Array(1), created_at: {…}, user: {…}}
created_at:
updated_at: ["2019-03-09 14:05:26"]
__proto__: Object
division: Array(1)
0: {id: 5, userid: "t863060h", workspace_id: "ROPHV6W", workspace_name: 
"workspace", created_at: "2019-03-09 13:39:31", …}
length: 1
__proto__: Array(0)
status: true
user:
created_at: "2019-03-08 18:29:56"
email: "[email protected]"
email_verification: 1
id: 1
loginStatus: 0
mobile_otp: 0
mobile_verification: 0
phone: "9632587410"
role: "Admin"
slug: ""
status: 2
team: null
uid: null

updated_at: "2019-03-08 18:29:56" идентификатор пользователя: "t863060h" имя пользователя: "попробуй поймать"

console.info(это.состояние)

nName: "tryCatchh", …}
addWorkspace: true
divisionName: "dud"
**divisions**: Array(0)//no data
length: 0
__proto__: Array(0)
isDivisionViewable: true
organizationId: "finalids"
organizationName: "tryCatchh"
role: "Admin"
userId: "t863060h"
workspacePP: false
workspaces: [{…}]

другая функция

  showDivision=()=>{
        console.info('dddd',this.state.divisions);
  }
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
1 194
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

SetState является асинхронным, поэтому, чтобы увидеть обновленное значение состояния, вам необходимо

Изменять

this.setState({...this.state,divisions:responseJson.division})

К

  this.setState({
       divisions:responseJson.division
  }, () => {
        console.info(this.state.divisions);//here you will get updated divisions state value
   });

@Hemadari Dasari Спасибо за ответ, теперь он работает для меня.

Mike3096 09.03.2019 16:08

@Hemadari Dasari Я пытался использовать эту переменную Divisions в другой функции this.state.divisions, но она вернула значение null.

Mike3096 09.03.2019 16:11

Он не сможет работать в других функциях, пока компонент не будет отрендерен.

Hemadri Dasari 09.03.2019 16:25

@ Хемадри Дасар я отредактировал сообщение, можете ли вы проверить один раз

Mike3096 09.03.2019 16:46

Обратите внимание, что ваш setState находится в функции тогда и будет выполняться после ответа на вызов API. Ваш console.info(this.state) запустится сразу после вызова API.

если вы хотите увидеть конечное состояние после вызова API, передайте функцию обратного вызова в качестве второго параметра для setState следующим образом:

this.setState({ divisions:responseJson.division }, () => console.info(this.state))

примечание: вам не нужно деструктурировать состояние при вызове setState, React уже делает это за вас.

спасибо за ответ ... теперь я попытался использовать эту переменную дивизий в другой функции с помощью this.state.divisions, но она вернула ноль

Mike3096 09.03.2019 16:11

проблема в том, когда вы его используете. можешь поделиться кодом?

Tubc 09.03.2019 16:21

@Mike3096 когда ты звонишь в showDivision? это будет то же самое, если вы вызовете эту функцию сразу после вызова API, ответа еще нет. и каков ваш вариант использования

Tubc 09.03.2019 18:07

в моем случае я должен использовать деления в функции рендеринга

Mike3096 09.03.2019 18:45

Функция рендеринга должна быть повторно запущена при изменении состояния и будет иметь самые последние данные. если это все еще не работает, вы можете создать образец в codeandbox, я могу посмотреть

Tubc 09.03.2019 18:53

Другие вопросы по теме