Javascript 将axios的响应设置为状态

当我在get-axios请求后尝试设置状态时，似乎没有准备好要呈现的数据。在控制台中，我获得了一个响应，但无法访问处于该状态的响应

import React, { Component } from 'react';
import axios from 'axios';
import { Grid, Row, Col } from 'react-flexbox-grid';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import stylefile from './stylefile';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import { withStyles } from '@material-ui/core/styles';
import '../App.css';

class TitleBar extends Component {
    constructor() {
        super();
        this.state ={
            data:[],
        }
      }

    componentDidMount() {
        axios.get('http://api.abc',
            {
                headers: { "Postman-Token": "abc"}
            })
            .then((response) => {
                console.log(response.data);
                this.setState({
                    data: response.data,
                })
            })
            .catch((error) => {
                console.log(error)
            })
    }

  render() {
    const { classes } = this.props;
    console.log(this.state.data,"data response")
    return (
        <div>
            {
                this.state.data.map(((item,key) => (
                 <div>
                     //
                 </div>
             )))}
        </div>
    );
  }
}

export default withStyles(stylefile)(TitleBar);
          console.log(error);
        });
    }

import React，{Component}来自'React'；
从“axios”导入axios；
从'react flexbox Grid'导入{Grid，Row，Col}；
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/Button”导入按钮；
从“./stylefile”导入样式文件；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/styles”导入{withStyles}”；
导入“../App.css”；
类标题栏扩展组件{
构造函数（）{
超级（）；
这个州={
数据：[]，
}
}
componentDidMount（）{
axios.get（）http://api.abc',
{
标题：{“邮递员令牌”：“abc”}
})
。然后（（响应）=>{
console.log（response.data）；
这是我的国家({
数据：response.data，
})
})
.catch（（错误）=>{
console.log（错误）
})
}
render（）{
const{classes}=this.props；
console.log（this.state.data，“数据响应”）
返回(
{
this.state.data.map（（（项，键）=>(
//
)))}
);
}
}
导出默认样式（样式文件）（标题栏）；
console.log（错误）；
});
}

//console.log（this.state.data）--未从中定义

componentWillMount（）在装入之前被调用。它在render（）之前调用，因此在此方法中同步调用setState（）不会触发额外的渲染

另外，应该使用

componentDidMount

，因为

componentWillMount

在新版本的react中被弃用

componentDidMount() {
        axios.get('http://api./abc',
            {
                headers: { "Postman-Token": "abc" }
            })
            .then((response) => { //use arrow to get setState on this call without any extra binding or placeholder variable
                console.log(response.data);
                this.setState({
                    data: response.data,
                })
            })
            .catch((error) => {
                console.log(error)
            })
    }

从

componentWillMount（）在装入之前被调用。它在render（）之前调用，因此在此方法中同步调用setState（）不会触发额外的渲染

另外，应该使用

componentDidMount

，因为

componentWillMount

在新版本的react中被弃用

componentDidMount() {
        axios.get('http://api./abc',
            {
                headers: { "Postman-Token": "abc" }
            })
            .then((response) => { //use arrow to get setState on this call without any extra binding or placeholder variable
                console.log(response.data);
                this.setState({
                    data: response.data,
                })
            })
            .catch((error) => {
                console.log(error)
            })
    }

---

尝试修复这些代码行：

  constructor(props) { //fixed
    super(props); //fixed
    this.state ={
        data:[],
    }
  }

这就是ReactJS为

类组件设置
构造函数（）方法的方法。我们只是在使用React的时候遵守它的规则

他们说,

React组件的构造函数在装入之前被调用。在实现React.Component子类的构造函数时，应该在调用任何其他语句之前调用super（props）。否则，this.props将在构造函数中未定义，这可能会导致错误

有关
constructor（）
方法的更多信息：

这是一个工作示例，我已经为您做了一个参考

该演示现已在CodeSandBox上提供：

TitleBar.js


import React，{Component}来自'React'；
从“axios”导入axios；
导出默认类标题栏扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
};
}
componentDidMount（）{
axios
.get（'https://jsonplaceholder.typicode.com/posts')
。然后（res=>{
console.log（res.data）；
this.setState（{data:res.data}）；
})
.catch（err=>console.log（err.message））；
}
render（）{
返回(
{this.state.data.map（i=>(
{i.title}
))}
);
}
}
尝试修复这些代码行：

  constructor(props) { //fixed
    super(props); //fixed
    this.state ={
        data:[],
    }
  }

这就是ReactJS为
类组件设置
构造函数（）方法的方法。我们只是在使用React的时候遵守它的规则

他们说,

React组件的构造函数在装入之前被调用。在实现React.Component子类的构造函数时，应该在调用任何其他语句之前调用super（props）。否则，this.props将在构造函数中未定义，这可能会导致错误

有关
constructor（）
方法的更多信息：

这是一个工作示例，我已经为您做了一个参考

该演示现已在CodeSandBox上提供：

TitleBar.js


import React，{Component}来自'React'；
从“axios”导入axios；
导出默认类标题栏扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
};
}
componentDidMount（）{
axios
.get（'https://jsonplaceholder.typicode.com/posts')
。然后（res=>{
console.log（res.data）；
this.setState（{data:res.data}）；
})
.catch（err=>console.log（err.message））；
}
render（）{
返回(
{this.state.data.map（i=>(
{i.title}
))}
);
}
}
您的API响应对象包括如下对象：

const response = {
  data: {
    MESSAGE: "List details Fetch successful",
    STATUS: "SUCCESS",
    DATA: [
      { id: 1, name: "foo" },
      { id: 2, name: "bar" },
      { id: 3, name: "baz" }
    ],
    HASH: "3--0"
  }
};

因此，您需要
response.data.data
来表示您的状态：

this.setState( { data: response.data.DATA } );

下面是一个模拟您的情况的工作示例


const remoteData={
数据：{
消息：“列表详细信息获取成功”，
状态：“成功”，
数据：[
{id:1，名称：“foo”}，
{id:2，名称：“bar”}，
{id:3，名称：“baz”}，
],
散列：“3--0”，
},
};
常量fakeRequest=（）=>
新承诺（resolve=>setTimeout（（）=>resolve（remoteData），1000））；
类应用程序扩展了React.Component{
状态={
数据：[]，
};
componentDidMount（）{
然后（response=>this.setState（{data:response.data.data}））；
}
render（）{
返回(
{this.state.data.map（el=>(
{el.id}

{el.name}

) )}
);
}
}
反应