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

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

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

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

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

javascript reactjs debugging

19.04.2019 10:51

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.info(res.data.message)
        this.setState({ dogs: res.data.message });
      })
      .catch(err => console.info(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);

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

— 19.04.2019 10:59

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

— 19.04.2019 10:59

19.04.2019 10:54

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.info(res.data.message);
    this.setState({ dogs: res.data.message });
  })

  .catch(err => console.info(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

19.04.2019 10:59