Реализация массива объектов в хранилище реагировать

Question

Я знаю, как использовать StoreJJ Store, но у меня возникла проблема, когда я использовал хранилище с массивом объектов.

    constructor(props) {
      super(props);
      this.state = {
        array: [{ id: null, summary: "", name: "" }]
      };
    }

componentWillMount() {
  const query = "http://api.tvmaze.com/search/shows?q=game";
  var dataCount;
  axios.get(query).then(response => {
    dataCount = response.data.length;
  });

  axios.get(query).then(response => {
    for (let i = 0; i < dataCount; i++) {

      if (response.status) {
        this.setState({
          array: [
            ...this.state.array,
            {
              id: i,
              summary: response.data[i].show.summary,
              name: response.data[i].show.name
            }
          ]
        });
      }
    }
  });
}

На самом деле, я сделал это, но есть куча проблем. это хранение массива [0] в this.state.array [0] 8-9 раз. Когда я пишу console.log (this.state.array [0]) не печатает только один экземпляр. Всегда печатает объект об Axios GET метод Response Count times. Я хочу хранить такие объекты, как this.state.array [0] = {id: 1, сводка: «xyz», имя: «abc»}, this.state.array 1 = {id: 1, сводка: «xyz» , имя: "abc"}.

Answer 1

1. Здесь нет необходимости отправлять два запроса. Вы можете получить данные и длину данных и работать с ними в одном запросе. На самом деле так будет лучше, потому что запросы axios не будут обрабатываться по порядку, поэтому вы не всегда можете иметь длину к тому времени, когда код зацикливается.
2. Возможно, можно указать лучшее имя для массива в состоянии, например shows
3. Там, по-видимому, нет начального пустого предмета, возможно, это можно отбросить.
4. Вероятно, было бы более простым сохранить полученные данные в состояние напрямую, а не извлекать из него определенные ключи, как этот, но этот второстепенный.
5. Используйте componentDidMount. componentWillMount устарело.

См. Эту демонстрацию