如何在 reactstrap 列表项上显示来自 rest api 的值列表答案

【问题标题】：How do I display the list of values from restapi on reactstrap list item如何在 reactstrap 列表项上显示来自 rest api 的值列表
【发布时间】：2021-02-19 03:07:44
【问题描述】：

以下是我的代码：

import React, { Component, Fragment,useState } from "react";
import RestAPI from "services/api";



import { handleServerErrors } from "utils/errorHandler";
   
const options = {
  colors: ["#aab5f0", "#99ccee", "#a0ddff", "#00ccff", "#00ccff", "#90c5f0"],
  enableTooltip: true,
  deterministic: true,
  fontFamily: "arial",
  fontSizes: [15, 60],
  fontStyle: "normal",
  fontWeight: "normal",
  padding: 3,
  rotations: 1,
  rotationAngles: [0, 90],
  scale: "sqrt",
  spiral: "archimedean",
  transitionDuration: 1000
  };

class TestForm extends Component {
  constructor(props){
    super(props);
    this.state={
      items:[],
      isLoaded:false,
      key:"",
      value:""
    }
  }
  handleChange = (event) =>
    this.setState({value: event.target.value});
  componentDidMount(){
    this.setState({ isLoding: true }, () => {
      RestAPI.newForm()
        .then((response) => {
          let keywordArray = [];
          for (let i = 0; i <= response.data.length; i++) {
            keywordArray.push({
              text: response.data[i].key,
              
              
            });
          }
          if (response.data.length === 0) {
            this.setState({
              isData: false,
            });
          }
          this.setState({
            isLoding: false,
            items: keywordArray,
          });
        })
        .catch((error) => {
          this.setState({ isLoding: false });
          handleServerErrors(error, toast.error);
        });
    });
  }
     
 
      render() {

        var {isLoaded,items} = this.state;

        
        
        return (
          <>
           
                         
                            
                           
                               
                            <div>
      {items.map(item => {
              return <li>{item[0]}</li>;
            })}
      </div>
    

          
                         
                        
    
   
                         
                  
               
          </>
        );
      }
}

export default TestForm;

从 Rest API，我得到以下列表作为数据：

["ant","build","code",...]

每当我从下拉列表中选择一个选项时，我希望此列表显示在列表项下。不显示这些值，我还尝试在 changeEvenet 中编写代码，而不是在 ComponentdidMount() 中编写代码。即使这样也行不通。什么是可行的解决方案？

【问题讨论】：

标签： reactjs django-rest-framework reactstrap

【解决方案1】：

您使代码复杂化，这是您如何提取数据的简单示例

class TestForm extends Component {
  constructor(props){
    super(props);
    this.state={
      items:[],
      isLoaded:false,
    }
  }

  componentDidMount(){
      this.setState({isLoading: true})
        RestAPI.newForm()
        .then((response) => {
            if(response && 'data' in response) {
                this.setState({
                    items: response.data,
                    isLoading: false
                })
            }else {
                this.setState({
                    isLoading: false,
                })
            }
        })
    });
  }
     
 
      render() {

        var {isLoaded,items} = this.state;
        return (
            <div>
                {items.map(item => <li>{item}</li>}
            </div>
        );
      }
}

export default TestForm;

【讨论】：