时间戳

首页 > 解决方案 > 无法将响应数据分配给状态数据并且响应在 React 中不为空

json - 无法将响应数据分配给状态数据并且响应在 React 中不为空

问题描述

我目前正在制作我的第一个 React API 应用程序，即使我将 res.data 分配给它不是空的，我也无法弄清楚状态数据是空的。我也不知道如何在 div 中呈现所有这些。

这是 res.data 的 console.log 返回的内容：

(2) [{…}, {…}]
0: {user: {…}, available_amount: 4324324}
1: {user: {…}, available_amount: 43243243}
length: 2
__proto__: Array(0)

这是我的代码：

  class App extends Component{
        constructor(props) {
        super(props);
        let data
        this.state = {
          data: [],
          loaded: false,
          placeholder: "Loading"
        };
      }
    

    async componentDidMount(){
        let data;
        axios
            .get('http://127.0.0.1:8000/api/',{
                headers:{
                'Authorization': 'Token 8651a2b6c28ecd5cd25c0e67dfd7f3642a3d0029'
                }
            })
            .then(res => {
                this.setState(() => {
                    return {
                    data: res,
                    loaded: true
                };
                });
            })
            .then(console.log(this.state.data))

    }

标签： jsonreactjsapidjango-rest-framework

解决方案

尝试以下...更改您setState的setState({...})并记住loading

import React, { Component } from "react";

const arrayOne = [
  {
    id: 1,
    nome: "Ruan"
  },
  {
    id: 2,
    nome: "Paul Symon"
  },
  {
    id: 3,
    nome: "Renan Lucas"
  }
];

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: true
    };
  }

  async componentDidMount() {
    setTimeout(() => {
      this.setState({ data: arrayOne, loading: false });
    }, 1000)
  }

  render() {
    return (
      <div>
        {this.state.loading ? (
          <h1>Carregando...</h1>
        ) : (
          <div>
            {this.state.data.map((i) => {
              return <h1>{i.nome}</h1>;
            })}
          </div>
        )}
      </div>
    );
  }
}

推荐阅读