我无法在 react.js 中动态呈现组件，

Question

因此，当我尝试从 JSON 在线文件动态地将组件呈现到视图中时，我开始使用 React 并卡住了。我正在使用 axios.get 从 JSON 获取信息，但无法正确呈现。

非常感谢任何帮助！！

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 为空白check screenshot of the project here

所以我尝试在控制台中创建两个日志（检查代码）并得到以下输出。对象的 console.log => console.log(问题) 给出了结果。另一个，显示未定义 check image of console.log here

Answer 1

Questions 是一个包含一个元素的数组，因此您希望在尝试访问 QuestionId 之前获取数组的元素 0。 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>
    );
  }
}

Answer 2

这是因为 axios 的 response.data 包含原始 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>
    );
  }
}

我无法在 react.js 中动态呈现组件，

I am unable to render components dynamically in react.js,

javascript

render

reactjs

axios