Javascript 在react with map操作符中处理数据时出现问题？

嗨，我对react中的react设置状态有点问题

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

这是我的数据

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

}

在那之后，我调用这样的反应函数

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

---

但是我的状态是空的，为什么你能指导我呢。

setState

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

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

---

您的toDoManupulateData应该如下所示

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);
        }
    });
    console.log(TO_DO,READY_FOR_DEVELOPEMENT,IN_PROGRESS,IN_QA,LIVE);
    this.setState({
            TO_DO:TO_DO,
            READY_FOR_DEVELOPEMENT:READY_FOR_DEVELOPEMENT,
            IN_PROGRESS:IN_PROGRESS,
            IN_QA:IN_QA,
            LIVE:LIVE
        },() => console.log(this.state));

}

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

---

首先，我不认为您需要使用

map

方法，而是使用forEach。另外，setState在异步模式下更新状态，这意味着setState不会在调用时立即更新状态。如果真的想检查那里的状态得到更新，请将回调函数传递到setState并检查那里的状态

toDoManupulateData = ()=>{
    let allToDoData = this.state._toDoData;
    let TO_DO = [];
    let READY_FOR_DEVELOPEMENT = [];
    let IN_PROGRESS = [];
    let IN_QA = [];
    let LIVE = [];
    allToDoData.forEach((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);
        }
        console.log(item);
    });
    console.log(TO_DO,READY_FOR_DEVELOPEMENT,IN_PROGRESS,IN_QA,LIVE);
    this.setState({
        TO_DO,READY_FOR_DEVELOPEMENT,IN_PROGRESS,IN_QA,LIVE
    }, () => {
       console.log(this.state);
    });
}

---

在allToDoData.map中返回console.log（item）正确吗？但是这里只返回condition base，我只是检查console log中的数据，这是否支持{to_DO，READY_FOR_development}语法？你试过{TO_DO:TO_DO，READY_FOR_development:READY_FOR_development}吗？是的，我试过，但没有设置状态