安装组件和 setState 后返回未定义的对象属性

Question

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

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

在 ResponsiveTable.render 中无法读取 null 的属性“0”

下面是我的组件的代码：

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

确保在第一次渲染时返回的查询为空，因此您会收到此错误。

如果你想使用this.state.returnedQuery[0] 检查它是否存在并且它的长度> 0：

render() {
        if (this.state.returnedQuery && this.state.returnedQuery.lenth > 0){ 
                return (
                    <div>
                        {this.state.returnedQuery.map(...)}
                    </div>
                );
        } else {
            return <div>loading data...</div>
        }
    }

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