设置从 axios 到 state 的响应

Question

当我在获取 axios 请求后尝试 setState 时，似乎我没有准备好呈现数据。在控制台中，我收到了响应，但无法访问该状态下的响应。

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);
        });
    }

//console.log(this.state.data) -- 未定义

Answer 1

您的 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 = {
  data: {
    MESSAGE: "List details Fetch successful",
    STATUS: "SUCCESS",
    DATA: [
      { id: 1, name: "foo" },
      { id: 2, name: "bar" },
      { id: 3, name: "baz" },
    ],
    HASH: "3--0",
  },
};

const fakeRequest = () =>
  new Promise( resolve => setTimeout( () => resolve( remoteData ), 1000 ) );

class App extends React.Component {
  state = {
    data: [],
  };

  componentDidMount() {
    fakeRequest().then( response => this.setState( { data: response.data.DATA } ) );
  }

  render() {
    return (
      <div>
        {this.state.data.map( el => (
          <div key={el.id}>
            <p>{el.id}</p>
            <p>{el.name}</p>
          </div>
        ) )}
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById( "root" )
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

来自React official docs，

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

Answer 3

尝试修复这些代码行：

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

这正是 ReactJS 为 class component 设置 constructor() 方法的方式。我们只是在使用它时遵守 React 的规则。

来自Official React Document，他们说：

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

有关contructor() 方法的更多信息：https://reactjs.org/docs/react-component.html#constructor

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

演示现已在 CodeSandBox 上提供：https://codesandbox.io/s/8xvn8yl1l2

TitleBar.js

import React, { Component } from 'react';
import axios from 'axios';
export default class TitleBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then(res => {
        console.log(res.data);
        this.setState({ data: res.data });
      })
      .catch(err => console.log(err.message));
  }
  render() {
    return (
      <div>
        {this.state.data.map(i => (
          <div key={i.id}>
            <h2>{i.title}</h2>
          </div>
        ))}
      </div>
    );
  }
}

App.js

import React, { Component } from 'react';
import TitleBar from './components/TitleBar';

class App extends Component {
  render() {
    return (
      <div>
        <TitleBar></TitleBar>
      </div>
    );
  }
}

export default App;

按照这个例子，如果this.state.data仍然是undefine，那么为了成功调试，我们可以关注两件事：

1.响应数据对象的结构。在您的情况下，解决方案可能是

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

2.API 是否按预期工作。

希望对您有所帮助。