Question

我使用axios.get的回调来设置React组件的状态。响应的data属性包含一组用于设置状态的对象。

当我将状态属性记录到控制台时，没有问题，我可以看到对象数组。但是，如果我尝试单独记录其中一个对象，我会收到错误：

无法阅读财产＆＃39; 0＆＃39;在ResponsiveTable.render中为null

以下是我的组件的代码：

class ResponsiveTable extends React.Component {

    constructor (props) {
        super(props)
        this.state = {
            returnedQuery: null
        };
    }

    componentDidMount() {
        axios.get('/api/latestLeads')
          .then((response) => {
              this.setState({
                  returnedQuery: response.data
              });
          })
          .catch(function (error) {
              console.log(error);
          });
    }

    render() {

        console.log(this.state.returnedQuery[0]);

        return (
            <div>
                <h1>test</h1>
            </div>
        );
    }
}

Answer 1

首先渲染您的returnedQuery为null，这样您就会收到此错误。

如果您想使用beans.xml检查它是否存在且长度是否为＆gt; 0：

this.state.returnedQuery[0]

Answer 2

你可以试试这个：

class ResponsiveTable extends React.Component {

    constructor (props) {
        super(props)
        this.state = {
            returnedQuery: null
        };
        this.getData();
    }

    getData = () => {
         axios.get('/api/latestLeads')
          .then((response) => {
              this.setState({
                  returnedQuery: response.data
              }, () => {console.log(this.state.returnedQuery);}); //What does this console.log() say?
          })
          .catch(function (error) {
              console.log(error);
          });
    }

    render() {

        console.log(this.state.returnedQuery[0]);

        return (
            <div>
                <h1>test</h1>
            </div>
        );
    }
}

Answer 3

我找到了与Andrew上面非常类似的解决方案，我使用组件的内部状态来确定axios.get方法是否已经返回。下面是工作代码，我现在能够访问返回数组中的元素及其属性。

class ResponsiveTable extends React.Component {

    constructor (props) {
        super(props)
        this.state = {
            returnedQuery: null
        };
    }

    componentDidMount() {

        const self = this;

        // let returnedQuery;
        axios.get('/api/latestLeads')
          .then((response) => {
              self.setState({
                  returnedQuery: response.data
              });
              console.log(response.data);
          })
          .catch(function (error) {
              console.log(error);
          });
    }

    render() {
        return (
          <div>
              <h1>{'This will always render'}</h1>
              { this.state && this.state.returnedQuery &&
              <div>{this.state.returnedQuery[0].email}</div>
              }
          </div>
        )
    }
}

安装组件和setState后返回undefined的Object属性

3 个答案: