使用 setState() 后 React Native 状态未更新

Question

我在 React Native 的 Class 中有一个状态和函数，我用它来创建一个计数器来记录已完成的任务数。在我的 updateTaskCountHandler() 函数中，taskCount 成功地将 +1 计数为先前的值，但是在将 completeTasks 设置为新值后控制台记录该值时，它没有显示 completeTasks 已成功更新为新值。如何正确更新 completeTasks 的状态？

state = {
        
        completeTasks: 0
    }

updateTaskCountHandler (className) {
        
        let taskCount = 0;
        taskCount = taskCount + 1;
        
        this.setState({
            completeTasks: taskCount
        })
        console.log('completeTasks:' + this.state.completeTasks);
    }   

 <ScrollView style={styles.taskitems}>
                    
                    <TaskCard clicked={() => this.updateTaskCountHandler("task1")} id='task1' chore='Get Dressed'/>
</ScrollView>

Answer 1

如果你想在你的 setState 逻辑之后看到状态结果，你应该在 setState 回调中记录你的状态，因为 react 的 setState 函数是异步的。

Answer 2

尝试在 this.setState 函数之后使用 this.forceUpdate()。这将导致 React 实际重新渲染父组件，父组件会将新的 props 传递给子组件

Answer 3

如果想看到状态的变化，需要使用回调如下：

this.setState({
        completeTasks: taskCount
    },()=>{
      console.log('completeTasks:' + this.state.completeTasks);
})

使用 setState() 后 React Native 状态未更新

React Native state not updating after using setState()

counter

setstate

react-native