Reactjs 反应-从api获取数据并呈现数据的步骤是什么？

我正在建立一个类似stackoverflow.com的网站。我希望我的主页显示最重要的问题。关于这一点，我有一些问题示例。现在，我只想显示问题数组中的问题和标记

代码在图像中

我已为此建立axios连接：

const instance = axios.create({

baseURL: "https://2w2knta9ag.execute-api.ap-south-1.amazonaws.com/dev", });

instance.defaults.headers.post["Content-Type"] = "application/json";

为了连接它，我编写了命令：

instance.get（“/questions）

现在，如何仅显示问题和标记

编辑：

使用下面给出的代码后，我的js文件现在变成：

import React from 'react';
import instance from '../../api';
class QuestionList extends React {

  componentDidMount() {
     instance
     .get("/questions")
     .then((res) => {
       this.setState({ data: res.data });
      });
  }

  render () {
    const { data } = this.state; 
    return <div>
      {
        data && data.map(d => {
          return <div>question: {d.question}, tags: {d.tags}</div>;
        })
      }
    </div>
  }
}   
export default QuestionList;

从“React”导入React；
从“../../api”导入实例；
类问题列表{
componentDidMount（）{
实例
.get（“/问题”）
。然后（（res）=>{
this.setState（{data:res.data}）；
});
}
渲染（）{
const{data}=this.state；
返回
{
data&&data.map（d=>{
返回问题：{d.question}，标记：{d.tags}；
})
}
}
}   
导出默认问题列表；

---

但是，这只是让我的站点处于加载状态，它被挂起了！！

如果我理解正确，你只想得到一个带有标签和问题的数组。如果是这样，你可以使用它

---

首先导出axios实例，以便可以从其他组件使用它。 现在，您可以在

componentDidMount

中发送api请求，并用数据更新组件的状态。 在渲染函数中，您只需从状态和显示中获取值

如果您是react新手，请学习react挂钩，并了解

componentDidMount

方法是发送api请求的最佳方式

例如：

import React from 'react';
import instance from '../../api';

class QuestionList extends React.Component {
    constructor() {
        super();
        this.state = {
            data: [],
        };
    }

    componentDidMount() {
        instance.get('/questions').then((res) => {
            this.setState({ data: res.data });
        });
    }

    render() {
        const { data } = this.state;
        return (
            <div>
                {data &&
                    data.map((d) => {
                        return (
                            <div>
                                question: {d.question}, tags: {d.tags}
                            </div>
                        );
                    })}
            </div>
        );
    }
}
export default QuestionList;

从“React”导入React；
从“../../api”导入实例；
类问题列表扩展了React.Component{
构造函数（）{
超级（）；
此.state={
数据：[]，
};
}
componentDidMount（）{
获取（'/questions'）。然后（（res）=>{
this.setState（{data:res.data}）；
});
}
render（）{
const{data}=this.state；
返回(
{数据&&
data.map（（d）=>{
返回(
问题：{d.question}，标签：{d.tags}
);
})}
);
}
}
导出默认问题列表；

这个问题太宽泛了。请只询问您面临的具体问题。听起来您最好还是学习React和web开发。是的，我是React新手，与其创建一个复杂的网站，不如先学习基础知识。React有很多不同的概念，所以不要在可能之前尝试运行walk.我如何在我的渲染函数中获得它？你知道如何将结果输入到渲染方法中吗？我认为最好先学习一些React，然后再向前跳这么多。我遵循了这一点，但是我的本地主机没有显示任何东西。如果你能解释正在进行映射的那些花括号的含义，我认为你对Rea非常基本ct..只是为了告诉你如何使用数据，你必须在render（）函数中返回一些东西。你可以在花括号之间编写javascript代码。我跟着你的代码，它告诉我这个错误：解析错误：意外标记，预期”；“在componentDidMount（）{…}上，代码可能有语法问题：）如果您认为不容易修复，请将其发布到此处

import React from 'react';
import instance from '../../api';

class QuestionList extends React.Component {
    constructor() {
        super();
        this.state = {
            data: [],
        };
    }

    componentDidMount() {
        instance.get('/questions').then((res) => {
            this.setState({ data: res.data });
        });
    }

    render() {
        const { data } = this.state;
        return (
            <div>
                {data &&
                    data.map((d) => {
                        return (
                            <div>
                                question: {d.question}, tags: {d.tags}
                            </div>
                        );
                    })}
            </div>
        );
    }
}
export default QuestionList;