无法更新当前状态的数组

Question

这是我的代码。但是，当我试图打印数组时，它正在打印空数组。

class FlatListItem extends Component{
    constructor(props){
        super(props)
        this.state={
            markers:[],
        }
    }
    changeSelectStatus=(key)=>{
        this.setState(prevState => ({
            markers: [...prevState.markers, key]
        }))
        console.log(this.state.markers)
    }
}

我想将所有键推入标记数组中，将其打印在控制台（远程调试器）中。

Answer 1

setState是一个异步函数，如果您想查看状态更改，则可以通过回调以查看状态更改

class FlatListItem extends Component{
    constructor(props){
        super(props)
        this.state={
            markers:[],
        }
    }
    changeSelectStatus=(key)=>{
        this.setState(prevState => ({
            markers: [...prevState.markers, key]
        }), () => console.log(this.state.markers) )
    }
}

Answer 2

在状态更改之前，生成了您的控制台日志，以查看您的代码工作是否应该更改控制台日志位置

示例

this.setState(prevState => ({
    markers: [...prevState.markers, key]
}), () => console.log(this.state.markers))

如果状态在应用代码后不更改

也许您可以尝试此

changeSelectStatus(key) {
        let x = this.state.markers
        x.push(key)
        this.setState({ markers = x }, () => console.log(this.state.markers))
}

Answer 3

您可以在设置状态（例如

）时使用await

fillArray = async () => {
    await this.setState(prevState => ({
        marker: [...prevState.marker, { id: 1, name: 'change' }],
    }));
    console.log(JSON.stringify(this.state.marker));
};

请在此处检查演示