Terryzjh
2021-09-23 19:03
采纳率: 100%
浏览 45
已结题

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


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不一致','页面无法打开'];)的

img


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

  • 好问题 提建议
  • 收藏

2条回答 默认 最新

  • CSDN专家-showbo 2021-09-23 21:01
    已采纳

    可以用reqwest模块加载接口数据后调用this.setState更新状态数据。或者直接用原生的fetch对象获取数据也行,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>
                )
            }
        }
    
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • 崽崽的谷雨 2021-09-24 09:38

    1.axios ,
    2.fetch引入进去就行

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题