Question

我建立了一个非常简单的状态，如下所示：

state = {
  nested: Array [
    0: {a:'a'},
    1: {a:'a'}, 
    2: {a:'a'},
    3: {a:'a'}...
  ]
}

nested从远程源（Firebase）获取值的位置。

我尝试了三种访问最后一个数组元素的a值的方法：

Object.values(this.state.nested)[Object.values(this.state.nested).length-1].a
Object.values(this.state.nested)[Object.values(this.state.nested).length-1]['a']
Object.values(this.state.nested).map(e=>e.a).pop()

第一种方法和第二种方法在控制台中都可以正常工作，但是在React render（）方法中给了我undefined。
尽管事实是它们返回了嵌套对象，但我已经typeof检查了这些对象。

我可以怀疑为什么会这样，但是为什么第三种方法才起作用？
我认为这种行为背后有一个原因，但无法想象。

Answer 1

最有可能发生这种情况，因为在加载数据之前，组件已呈现一次。有两种简单的方法可以解决此问题：

为构造函数中的组件设置默认状态
检入render函数以确保嵌套具有元素

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    
    //option #1
    state = {
      nested: [{a:'default value'}]
    };
  }
}

OR

class ExampleComponent extends React.Component {
  render() {
    return (
      {
        //option #2
        this.state.nested && this.state.nested.length > 0 ? 
        (//return div using the nested information here ) :
        (//return div in the case nested is empty )
      }
    );
  }
}

如果您要在componentDidMount（）函数中加载数据，那么一旦加载了数据，React就会重新渲染该组件。确保在componentDidMount（）中使用this.setState（）。

在render（）方法内部访问状态值

1 个答案: