javascript - 正在接收数据但无法显示

Question

我正在尝试使用axios http请求来显示一些数据，我正在测试如何使用react将api数据显示到客户端。

https://codesandbox.io/s/4x291xp574

我的 api 调用正常工作，您可以在控制台中看到我正在获取一些数据

我想使用 map() 方法在 div 标记内显示我的 data。如果有人可以帮助我理解我做错了什么

Answer 1

这是您的可行代码。

import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dogs: []
    };
  }

  componentDidMount() {
    axios("https://dog.ceo/api/breed/husky/images")
      .then(res => {
        console.log(res.data.message)
        this.setState({ dogs: res.data.message });
      })
      .catch(err => console.log(err));
  }

  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>

        <div>
          {this.state.dogs.map(dog => (
            <div>
              <img src={dog}/>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);