javascript - 与 map 操作符 react 时的数据操作问题？

Question

嗨，我在像这样的 react 中遇到了一些 react setState 的问题

这是我的数据

this.state = {
            _toDoData :  [
                {id:'1', title:'Lang Tag on Hindi', label:'toDo', priority:'Major', ticketId:'ETUIOPS-1', assignee:'Rohit'},
                {id:'2', title:'Template Meta Tag Change about page', label:'readyForDevelopment', priority:'Critical', ticketId:'ETUIOPS-2', assignee:'Rohit Azad'},
                {id:'3', title:'Currency Converter change', label:'inProgress', priority:'Critical', ticketId:'ETUIOPS-3', assignee:'Rohit Malik'},
                {id:'4', title:'SEO Rule change', label:'inQa', priority:'Critical', ticketId:'ETUIOPS-4', assignee:'Rohit Malik'},
                {id:'5', title:'Implement Live tv', label:'live', priority:'Critical', ticketId:'ETUIOPS-5', assignee:'Rohit Malik'}
            ],
            showTodoText : 'Click to show ToDo items',
            showHideToDo:false,
            TO_DO:[],
            READY_FOR_DEVELOPEMENT:[],
            IN_PROGRESS:[],
            IN_QA:[],
            LIVE:[]
        }

之后我调用这个函数

toDoManupulateData = ()=>{
    let allToDoData = this.state._toDoData;
    let TO_DO = [];
    let READY_FOR_DEVELOPEMENT = [];
    let IN_PROGRESS = [];
    let IN_QA = [];
    let LIVE = [];
    allToDoData.map((item)=>{
        if(item.label === 'toDo'){
            TO_DO.push(item);
        }else if(item.label === 'readyForDevelopment'){
            READY_FOR_DEVELOPEMENT.push(item);
        }else if(item.label === 'inProgress'){
            IN_PROGRESS.push(item);
        }else if(item.label === 'inQa'){
            IN_QA.push(item);
        }else if(item.label === 'live'){
            LIVE.push(item);
        }
        return console.log(item);
    });
    console.log(TO_DO,READY_FOR_DEVELOPEMENT,IN_PROGRESS,IN_QA,LIVE);
    return this.setState({
        TO_DO,READY_FOR_DEVELOPEMENT,IN_PROGRESS,IN_QA,LIVE
    });

}

之后我调用像这样的 react 函数

componentDidMount(){
    console.log(this.state)
    this.toDoManupulateData();
    console.log(this.state)
}

但是我的状态是空白，为什么你可以指导我。

Answer 1

setState 是异步的。如果您想在更新后记录状态，请使用第二个参数回调。

return this.setState({
    TO_DO,READY_FOR_DEVELOPEMENT,IN_PROGRESS,IN_QA,LIVE
}, () => console.log(this.state);