关于javascript：如何在React中使用axios显示API数据？


How to display API data using axios with React?

本问题已经有最佳答案，请猛点这里访问。

我有以下代码可以完美地应用于分配给const的对象列表。但是，每当我从DRF API端点获取对象列表时，都可以console.log这些对象，但是无法将这些对象中的信息显示到站点。这是我使用的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    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);
      });

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

enter

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
componentDidMount() {

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

render() {
  return (
   
      { 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}
        />
      )) }
   
  );
}

相关讨论