如何在反应 js 前端打印 Django 列表答案

【问题标题】：How to print a Django List on react js frontend如何在反应 js 前端打印 Django 列表
【发布时间】：2021-02-19 06:47:02
【问题描述】：

我有一个列表如下：

["test1","test2","test3","test4"]

我有以下序列化程序类：

class ListSerializer(serializers.Serializer):
    key=serializers.ListField()

这是views.py文件：

class ListView(APIView):
    def get(self, request,*args, **kwargs):
        serializer_class = ListSerializer
        #print("The serializer is:",serializer_class)
        #print(printList())
        return Response({"keywords":printList()})

在前端，我有以下API方法：

 static listFormUser() {
    const TOKEN = getItem("accessToken");
    return axios({
      method: "get",
      url: `${BASE_URL}/api/listtopics/`,
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
        Authorization: `Token ${TOKEN}`,
      },
    }).then((res) => res);
  }
}

以下是我用于显示列表的 React 类代码

class printForm extends Component {
  constructor(props){
    super(props);
    this.state={
      items:[],
      isLoaded:false,
      key:"",
    }
  }
componentDidMount(){
    this.setState({ isLoding: true }, () => {
      RestAPI.listForm()
        .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(){
   return(<ListGroup>
      <ListGroupItem>Cras justo odio</ListGroupItem>
      <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
      <ListGroupItem>Morbi leo risus</ListGroupItem>
      <ListGroupItem>Porta ac consectetur ac</ListGroupItem>
      <ListGroupItem>
      {items.map(item => {
              return <li>{items[0]}</li>;
            })}
      </ListGroupItem>
    </ListGroup>
)
}

该列表未打印。这里可能出现什么错误？我尝试了很多方法，但没有一个有效

【问题讨论】：

标签： python-3.x reactjs django django-rest-framework django-react

【解决方案1】：

在ListView 中，您返回带有列表的 JSON（不需要序列化程序）。

def printList():
    return ["test1","test2","test3","test4"]

class ListView(APIView):
    def get(self, request,*args, **kwargs):
        return Response({"keywords":printList()})

在 React 端访问列表：

          let keywordArray = [];
          for (let i = 0; i < response.data["keywords].length; i++) {
            keywordArray.push({
              text: response.data["keywords"][i],
            });
          }

如您所见，您需要通过在response.data 中设置“关键字”来访问该列表。

这里有一个很好的教程，教你如何制作CRUD in Django+React。

【讨论】：