如何在react js前端打印Django列表

Question

我有一份清单，如下：

["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>
)
}

列表不是printed.What可能是这里的错误？我试过很多方法，但都不管用。

Answer 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的很好的教程。