如何使用带有 React 的 axios 显示 API 数据？ [复制]

Question

我有以下代码在分配给const 的对象列表上完美运行。但每当我从 DRF API 端点获取对象列表时，我可以console.log 对象，但无法将来自对象的信息显示到站点。这是我使用的代码。

    const comps = []
    axios.get('http://127.0.0.1:8000/')
      .then(response => {
        const items = response.data;
        items.forEach((item) => {
          console.log(item)
          comps.push(<Item
                        id={item.id}
                        name={item.name}
                        inCart={this.state.cart[item.id]}
                        quantity={item.quantity}
                        unit={item.unit}
                        price={item.price}
                        handleDecreaseClick={handleDecreaseClick(item.id, item.price)}
                        handleIncreaseClick={handleIncreaseClick(item.id, item.price)}
                        key={item.id} />)
        })
      })
      .catch(function(error) {
        console.log(error);
      });

我知道循环运行良好，因为我可以在浏览器控制台中记录对象。

但网站中没有显示任何内容。可能是什么问题？

Answer 1

如果您在 render() 函数中执行此操作，请将异步请求部分移至 componentDidMount()。

componentDidMount() {

  axios.get('http://127.0.0.1:8000/')
    .then((response) => {
      this.setState({items: response.data});
}

render() {
  return (
    <div>
      { this.state.items.map((item) => (
        <Item
          id={item.id}
          name={item.name}
          inCart={this.state.cart[item.id]}
          quantity={item.quantity}
          unit={item.unit}
          price={item.price}
          handleDecreaseClick={handleDecreaseClick(item.id, item.price)}
          handleIncreaseClick={handleIncreaseClick(item.id, item.price)}
          key={item.id}
        />
      )) }
    </div>
  );
}