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;

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

2 个答案: