Question

我正在尝试使用axios http请求显示一些数据，我正在测试如何以响应方式在客户端显示api数据。

我的api通话正常运行，正如您在console中所见，我正在获取一些数据

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

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

Answer 2

replicate

https://codesandbox.io/s/j1lz1vz0wv

数据正在接收但无法显示

2 个答案: