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

因此，我开始在react中工作，当我试图从一个JSON文件在线动态地将组件呈现到视图中时，我陷入了困境。我正在使用axios.get从JSON获取信息，但无法正确呈现

非常感谢您的帮助

Json:

import React，{Component}来自“React”；
从“axios”导入axios；
类课程扩展组件{
状态={
问题：[]
};
异步组件didmount（）{
const{data:Questions}=wait axios.get(
"https://api.myjson.com/bins/1axyok"
);
这个.setState（{Questions}）；
控制台日志（问题）；
log（this.state.Questions.QuestionID）；
}
render（）{
返回(
{this.state.Questions.QuestionID}
);
}
}

未将this.state.Questions.QuestionID（示例）的值呈现到视图中

应该呈现（问题下方）QuestionID的部分为空

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

---

Questions

是一个包含一个元素的数组，因此在尝试访问

QuestionId

之前，您需要获取数组的元素

0

。

问题

也是response对象的一个属性，因此您需要使用它，而不仅仅是

数据

示例

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

类课程扩展组件{
状态={
问题：[]
};
异步组件didmount（）{
const{data}=wait axios.get(
"https://api.myjson.com/bins/1axyok"
);
this.setState（{Questions:data.Questions}）；
}
render（）{
返回(
{this.state.Questions[0]&&this.state.Questions[0].QuestionID}
);
}
}

这是因为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>
    );
  }
}

类课程扩展组件{
状态={
问题：[]
};
异步组件didmount（）{
const{data:Questions}=wait axios.get(
"https://api.myjson.com/bins/1axyok"
);
this.setState（{Questions:Questions.Questions}，（）=>{
console.log（this.state.Questions）；
});
}
render（）{
返回此.state.Questions.map（（每个）=>(
{each.QuestionID}
);
}
}

setState是异步的，这就是为什么您的console.log会产生未定义的结果。当您需要访问状态时，使用第二个参数通过回调来设置state。

Questions

是一个数组。因此它没有属性

QuestionID

。谢谢您，Aadi！但它显示了一个未定义“each”的错误！

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