reactJS存储中的对象数组实现

Question

我知道如何使用reactJS存储，但是当我将存储与对象数组一起使用时，我遇到了一个问题。

    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
            }
          ]
        });
      }
    }
  });
}

  

实际上，我确实对此进行了编码，但是存在很多问题。它是   将array [0]存储在this.state.array [0]中8-9次。当我写   console.log（this.state.array [0]）它不只打印一个实例。   始终打印有关axios GET方法响应计数时间的对象。   我想存储像   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 is deprecated.

See this demo