Данные принимаются, но не могут отображаться

Question

Я пытаюсь использовать axios http-запрос для отображения некоторых данных, я тестирую, как отображать api данные на стороне клиента с помощью реакции.

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

У меня 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

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

https://codesandbox.io/s/j1lz1vz0wv