Я не могу рендерить компоненты динамически в Reaction.js, - PullRequest
Новая
       19

Я не могу рендерить компоненты динамически в Reaction.js,

0 голосов
/ 05 ноября 2018

Итак, я начал работать с реагировать и застрял, когда пытался динамически визуализировать компонент в виде из файла JSON онлайн. Я использую axios.get для получения информации из JSON, но не могу правильно ее отобразить.

любая помощь высоко ценится!

Json: Json Link, используемая в проекте 

import React, { Component } from "react";
import axios from "axios";


class Lessons extends Component {
  state = {
    Questions: []
  };

  async componentDidMount() {
    const { data: Questions } = await axios.get(
      "https://api.myjson.com/bins/1axyok"
    );
    this.setState({ Questions });
    console.log(Questions);
    console.log(this.state.Questions.QuestionID);
  }

  render() {
    return (
      <h4 style={{ padding: "20px" }}>{this.state.Questions.QuestionID}</h4>
    );
  }
}

Значение this.state.Questions.QuestionID (пример) не отображается в представлении

часть, где она должна была отображаться (ниже вопроса). QuestionID не указан проверьте скриншот проекта здесь

Итак, я попытался сделать два журнала в консоли (проверить код) и получил следующий вывод. Console.log для объекта => console.log (Вопросы) дает результат. другой показывает неопределенный проверить образ console.log здесь

Ответы [ 2 ]

0 голосов
/ 05 ноября 2018

Это потому, что response.data от axios содержит необработанные данные JSON. Теперь в JSON, который вы разместили, объект содержит массив Question, а каждый элемент массива содержит QuestionID. Поэтому измените код компонента на этот 

class Lessons extends Component {
  state = {
    Questions: []
  };

  async componentDidMount() {
    const { data: Questions } = await axios.get(
      "https://api.myjson.com/bins/1axyok"
    );
    this.setState({ Questions: Questions.Questions }, () => {
      console.log(this.state.Questions);
    });
  }

  render() {
    return this.state.Questions.map((each) => (
      <h4 style={{ padding: "20px" }}>
        {each.QuestionID}
      </h4>
    );
  }
}
0 голосов
/ 05 ноября 2018

Questions - это массив с одним элементом, поэтому вы хотите получить элемент 0 массива, прежде чем пытаться получить доступ к QuestionId. Questions также является свойством объекта ответа, поэтому вам нужно использовать его, а не только data.

Пример 

class Lessons extends Component {
  state = {
    Questions: []
  };

  async componentDidMount() {
    const { data } = await axios.get(
      "https://api.myjson.com/bins/1axyok"
    );
    this.setState({ Questions: data.Questions });
  }

  render() {
    return (
      <h4 style={{ padding: "20px" }}>
        {this.state.Questions[0] && this.state.Questions[0].QuestionID}
      </h4>
    );
  }
}
...