Почему не выводятся данные из состояния 'options'?

Question

[Дмитрий]

import React, { Component } from 'react';
import axios from 'axios';

export default class App extends Component {
  state = {
    searchValue: '',
    options: [],
    roots: [],
  }

  componentDidMount () {
    axios.get(`https://swapi.co/api/`)
      .then(data => {
        var arr = [];
        for (var key in data.data) {
          arr.push(data.data[key]);
        }
        this.setState({ roots: arr });
      })
      .catch(err => console.log('Error: ', err));
  }

  onSearchChange = event => {
    this.setState({ searchValue: event.target.value });
    if (event.target.value.length >= 3) {
      let newData = [];
      this.state.roots.map((root) => {
        axios.get(`${root}?search=${this.state.searchValue}`)
          .then(data => { 
            data.data.results.map((item) => {
              const rootName = root.split('/');
              const searchItem = {
                name: item.name,
                rootName: rootName[4],
              }
              newData.push(searchItem)
            });
          })
          .catch(err => console.log('Error: ', err));
      })
      this.setState({ options: newData });
      console.log(this.state.options);
    }
  }

  render() {
    return (
      <div>
        <input value={this.state.searchValue} onChange={this.onSearchChange} />
        { this.state.options ?
          <div className="options__list">
            { this.state.options.map( (item, index) => {
              return (
                <div
                  key={ index }
                  className="options__item"
                >
                  <span className="options__text">
                    {item.name} - {item.rootName}
                  </span>
                </div>
              );
            } ) }
          </div> : null
        }
      </div>
    )
  }
}

Не выводятся данные состояния options, но если удалить то, что ввел, вроде бы показываются данные последнего запроса. Не могу понять что именно вывожу не так.

Answer 1

[0xD34F]

Выполняете setState до получения ответа (метод onSearchChange).

Comments

[Дмитрий]

Немного переделал onSearchChange, не подскажите нормально ли изменять так как я сделал?

import React, { Component } from 'react';
import axios from 'axios';

export default class App extends Component {
  state = {
    searchValue: '',
    options: [],
    showOptions: false,
    roots: [],
  }

  componentDidMount () {
    axios.get(`https://swapi.co/api/`)
      .then(data => {
        var arr = [];
        for (var key in data.data) {
          arr.push(data.data[key]);
        }
        this.setState({ roots: arr });
      })
      .catch(err => console.log('Error: ', err));
  }

  onSearchChange = event => {
    this.setState({ searchValue: event.target.value });
    if (event.target.value.length >= 3) {
      this.setState({ options: [], showOptions: true });
      this.state.roots.map((root) => {
        axios.get(`${root}?search=${this.state.searchValue}`)
          .then(data => { 
            data.data.results.map((item) => {
              const rootName = root.split('/');
              const searchItem = {
                name: item.name,
                rootName: rootName[4],
              }
              this.setState(prevState => ({
                options: [...prevState.options, searchItem]
              }))
            });
          })
          .catch(err => console.log('Error: ', err));
      })
    } else {
      this.setState({ showOptions: false });
    }
  }

  render() {
    return (
      <div>
        <input value={this.state.searchValue} onChange={this.onSearchChange} />
        { this.state.showOptions ?
          <div className="options__list">
            { this.state.options.map( (item, index) => {
              return (
                <div
                  key={ index }
                  className="options__item"
                >
                  <span className="options__text">
                    {item.name} - {item.rootName}
                  </span>
                </div>
              );
            } ) }
          </div> : null
        }
      </div>
    )
  }
}

[0xD34F]

dimasgfree, нет, не нормально. Отдельный вызов setState для каждого элемента полученного массива, и самих запросов несколько - дичь какая-то. Почему бы не собрать сначала все данные, и вызвать setState один раз? Как-то так:

const search = this.state.searchValue;
Promise.all(this.state.roots.map(n => {
  return axios.get(`${n}?search=${search}`).then(response => {
    return response.data.results.map(item => ({
      name: item.name,
      rootName: n.split('/')[4],
    }));
  }).catch(() => []);
})).then(results => {
  this.setState({
    options: results.flat(),
  });
});