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)
    }
}

我想将所有键推入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));
};

请在此处检查Demo

无法在当前状态下更新阵列

3 个答案: