Question

我有以下构造函数

constructor(props){
    super(props);
    this.renderConversations = this.renderConversations.bind(this);
    this.startConversation = this.startConversation.bind(this);
    this.state = {
      conversationArray: []
    }
}

在函数startConversation中，我更新了状态变量。

startConversation(conversationObject) {
    let currentResponse = conversationObject["responses"];
    let thisResponse = currentResponse[Math.floor(Math.random() * currentResponse.length)];

    this.state.conversationArray.push(thisResponse);
    this.renderConversations();

}

在函数renderConversations中，我正在执行以下操作：

renderConversations(){
    let conversationContent = this.state.conversationArray.map((conv, i) => {
      return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow]}><Text style= {globalStyle.conversationText}>{ conv }</Text></View>                            
    })
    return conversationContent
}

最后，在渲染函数中，我渲染{this.renderConversations()}。现在点击按钮会触发startConversation。但每次我更新状态变量时组件都不会更新，我做错了什么？

Answer 1

根据 DOC ：

永远不要直接改变this.state，使用setState，对待this.state就像它一样不可变的。

您正在以错误的方式更新状态，“永远不要直接改变状态值，总是使用setState来更新它”。当我们使用setState react时，会自动使用更新状态值重新呈现组件。

像这样写：

this.setState(prevState => ({
     conversationArray: [...prevState.conversationArray, thisResponse]
}))

另一个问题是 setState是async ，我们不能指望在setState之后的更新状态值，所以使用setState的回调方法并在其中调用renderConversations。

像这样：

this.setState(prevState => ({...}), () => this.renderConversations())

阅读此答案，详细了解 async behaviour of setState 。

建议：所有的ui逻辑都应该在render方法中，所以如果你想创建ui，请从render中动态调用renderConversations。

状态更新后，渲染功能不会更新视图

1 个答案: