Блог

Главная - Вопросы по программированию - Данные принимаются, но не могут быть показаны

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

#javascript #reactjs #debugging

#javascript #reactjs #отладка

Вопрос:

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

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

Мой api вызов работает правильно, как вы можете видеть в console том, что я возвращаю некоторые данные

Я хочу отобразить мои data внутренние div теги, используя этот map() метод. Если кто-нибудь может, пожалуйста, помогите мне понять, что я делаю неправильно

Ответ №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);

Комментарии:

1. Хммм, хорошо, я понимаю, что ты сделал. Но почему он показывает только url текст, а не изображения?

2. вам нужно удалить элемент <p> и использовать <img src={dog} />

Ответ №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

Метки: ,