Question

因此，当我尝试通过在线JSON文件将组件动态呈现到视图中时，我开始从事React工作并陷入困境。我正在使用axios.get从JSON获取信息，但无法正确呈现它。

我们非常感谢您的帮助！

def conc_outside_loop(filenames):

    df_list = []
    for filename in filenames:
        df_list.append(pd.read_csv(filename))

    return pd.concat(df_list, ignore_index=True)

>> %timeit -n 10 conc_outside_loop(glob.glob('*.csv'))
344 ms ± 23.4 ms per loop (mean ± std. dev. of 7 runs, 10 loops each)

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

应该呈现的部分（在问题下方）QuestionID为空白check screenshot of the project here

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

Answer 1

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

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中动态呈现组件，

2 个答案: