reactJS store 中的对象数组实现

Question

我知道如何使用 reactJS store，但是当我将 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
            }
          ]
        });
      }
    }
  });
}

实际上，我确实编写了此代码，但存在很多问题。它是 在 this.state.array[0] 中存储 array[0] 8-9 次。当我写 console.log(this.state.array[0]) 它不只打印一个实例。 始终打印有关 axios GET 方法响应计数次数的对象。 我想存储像 this.state.array[0]={id:1, summary:"xyz",name:"abc"}, this.state.array1={id:1, summary:"xyz", name:" abc"}。

Answer 1

1. 这里不需要发送两个请求。您可以在一个请求中获取数据和数据长度并使用它们。这样实际上会更好，因为 axios 请求不会按顺序解析，所以在代码循环时您可能并不总是有长度。
2. 可以为状态中的数组使用更好的名称，例如shows
3. 里面有一个初始的空项目，似乎没有理由，可能会扔掉它。
4. 将获取的数据直接存储到状态中可能更直接，而不是像这样从中提取特定的键，但这是次要的。
5. 使用componentDidMount。 componentWillMount is deprecated.

See this demo