react怎么获取后端接口，并渲染。

Question

import { Button } from "antd";
import React from "react";


export class Inputt extends React.Component {
    constructor(props) {
         super(props);
         this.state = {
              textareaValue: [],//改为数组
              bgcolor:'#f00'
         }

    }

    render() {
         const buttonOnClick = (e) => {
         var state=this.state.textareaValue;
         var index=state.findIndex(i=>i==e.currentTarget.value);//找到点击按钮值的下标
         if(index==-1){//不存在压入数组
         state.push(e.currentTarget.value);
         }
         else{//存在则移除
         state.splice(index,1);
         }
              this.setState({
                    textareaValue:state
              })
         }

         const textareaonChange = (e) => {
              this.setState({
                    textareaValue: e.target.value
              })
         }
         function renderButton(words,state){
            var btns=[];
            for(var v of words)btns.push(<Button style = {{background:state.textareaValue.find(i=>i==v)?state.bgcolor:''}} shape='round' onClick={(e) => buttonOnClick(e) }  value={v} key={v}>{v}</Button>)
            return btns;
         }
         var words=['过度授权','重复授权','授权死循环','应用截图与demo不一致','页面无法打开'];

         return (
              <div>
                    {renderButton(words,this.state)}
                    <hr></hr>
                    <textarea style={{width:500}} value={this.state.textareaValue.join('；')} onChange={(e) => textareaonChange(e)}></textarea>
              </div>

         )
    }
}

approval/getApprovalOpinionTag 这是GET请求，是Button标签（ var words=['过度授权','重复授权','授权死循环','应用截图与demo不一致','页面无法打开'];）的

还需要什么，可以给我说下。万分感谢

Answer 1

可以用reqwest模块加载接口数据后调用this.setState更新状态数据。或者直接用原生的fetch对象获取数据也行，fetch使用参考

使用 Fetch - Web API 接口参考 | MDN Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。 https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

代码大概如下

    import { Button } from "antd";
    import React from "react";

    export class Inputt extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                textareaValue: [],//改为数组
                bgcolor: '#f00',
                words:[]//新增words属性，以便fetch更新
            }
        }

        componentDidMount() {//增加组件mount事件
            //fetch获取数据
            fetch('/approval/getApprovalOpinionTag').then(res => {
                return res.json();
            }).then(data => {
                console.log(data)
                this.setState({ words: data.data })//更新
            });
        }
        render() {
            const buttonOnClick = (e) => {
                var state = this.state.textareaValue;
                var index = state.findIndex(i => i == e.currentTarget.value);//找到点击按钮值的下标
                if (index == -1) {//不存在压入数组
                    state.push(e.currentTarget.value);
                }
                else {//存在则移除
                    state.splice(index, 1);
                }
                this.setState({
                    textareaValue: state
                })
            }
            const textareaonChange = (e) => {
                this.setState({
                    textareaValue: e.target.value
                })
            }
            function renderButton(words, state) {
                var btns = [];
                for (var v of words) btns.push(<Button style={{ background: state.textareaValue.find(i => i == v) ? state.bgcolor : '' }} shape='round' onClick={(e) => buttonOnClick(e)} value={v} key={v}>{v}</Button>)
                return btns;
            }
            //var words = ['过度授权', '重复授权', '授权死循环', '应用截图与demo不一致', '页面无法打开'];//数据通过fetch从接口获取，看componentDidMount事件，下面的componentDidMount注意看修改过参数插入
            return (
                <div>
                    {renderButton(this.state.words, this.state)}
                    <hr></hr>
                    <textarea style={{ width: 500 }} value={this.state.textareaValue.join('；')} onChange={(e) => textareaonChange(e)}></textarea>
                </div>
            )
        }
    }