Блог

Главная - Вопросы по программированию - Как получить длину массива в состоянии в React?

Как получить длину массива в состоянии в React?

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть приложение React с вызовом API. Я устанавливаю состояние с начальным массивом и устанавливаю его в массив JSON в вызове API. Мне нужно получить длину массива для вычисления. Я попробовал следующий код, но не сработал! Консоль говорит только «Undefined«

 componentDidMount() {
    API.get('project')
      .then(({ data }) => {
        this.setState({ 
          columns: data.response,
          ordered: Object.keys(data.response)
        }, () =>
          console.log("old ", this.state.columns.length)
        )
      })
      .catch((err) => {
        console.log("AXIOS ERROR: ", err);
      })
  }

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

1. Используя отладчик, встроенный в ваш браузер, поставьте точку останова на this.setState строке и посмотрите data.response . По-видимому, это не то, что вы думаете (поскольку, если бы это было так, то то, что вы делаете, сработало бы).

2. Когда вы говорите, что это не работает … как насчет того, что это не работает?

3. @OliverRadini это «Не определено». Я обновил свой код

4. Это странно… Мне любопытно, почему вы undefined регистрируетесь, а не либо 0 , если массив пуст, либо Cannot read property 'length' of undefined

Ответ №1:

Ну, вы разрушаете response объект из XHR и получаете непосредственно data поле, а затем снова вызываете .response для него. Это эквивалентно записи responseFromXHR.data.response . Попробуйте что-то вроде следующего :

Эти 2 синтаксиса эквивалентны

 // old syntax
axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
  })

против 

 // destructuring syntax
axios.get('/user/12345')
  .then(function ({data}) {
    console.log(data);
  })

Я не знаю точно, что вы получаете от API, но что-то вроде этого кажется лучше : 

 componentDidMount() {
    API.get('project')
      .then(({ data }) => {
        // debugger; // uncomment to display debugger in chrome and check `data` value
        this.setState({ 
          columns: data,
          ordered: Object.keys(data)
        }, () =>
          console.log("old ", this.state.columns.length)
        )
      })
      .catch((err) => {
        console.log("AXIOS ERROR: ", err);
      })
  }