状态在 "ComponentDidMount" 中定义，但在渲染中未定义

Question

我从我的“ComponentDidMount”函数中提取数据并在我的状态下加载它们。在我控制台记录该值并看到一切都在那里之后。但是，当我尝试在我的渲染函数中以相同的方式在我的 return 中访问状态时，我将得到“未定义”。

public componentDidMount() {
sp.web.lists.getByTitle("alert").items.get().then((item) => {
  this.setState({items: item})
  console.log(this.state.items[0].Title) //works
})

}

以上控制台日志“(this.state.items[0].Title)”有效。我尝试在渲染函数中以相同的方式使用状态：

 <span className={ styles.title }>{this.state.items[0].Title}</span>

不起作用，值未定义。怎么会？当组件加载时，我将数据存储在我的状态中，并期望当我在我的渲染中引用状态时数据在那里。怎么会？

Answer 1

componentDidMount 在组件初始渲染后调用。所以当render函数第一次被调用时，this.state.items[0].Title将是未定义的。

渲染组件后，componentDidMount 将执行并更新状态并重新渲染您的组件。

在 render 函数中，仅当定义了 this.state.items[0] 时才访问 Title 属性。

<span className={ styles.title }>
   { this.state.items[0] && this.state.items[0].Title }
</span>

您还应该注意的另一件事是 this.setState 函数异步更新状态，因此尝试在 this.setState 函数调用后立即记录状态将为您提供先前的状态值.

如果您想记录最新状态，您可以将可选的第二个参数传递给 this.setState 函数。第二个参数是状态更新后调用的回调函数。

this.setState({items: item}, () => {
    console.log(this.state.items[0].Title)
})

状态在 "ComponentDidMount" 中定义，但在渲染中未定义

State is defined in "ComponentDidMount" but undefined in render

javascript

sharepoint

reactjs