React - 从 api 获取数据并渲染它的步骤是什么？

Question

我正在构建一个类似于 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;

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

Answer 1

如果我理解正确，您只想获得一个带有标签和问题的数组。如果是这样，您可以为此使用Array.prototype.map

const questions = result.map(({ question, tags }) => ({ question, tags }))

Answer 2

首先，您导出 axios 实例，以便可以从其他组件中使用它。 现在您可以在componentDidMount 中发送 api 请求并使用数据更新组件的状态。 而在渲染函数中，您只需从状态和显示中获取值。

如果您是 react 新手，请学习 React Hooks 并知道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;