与地图操作员的React中的数据操纵问题

Question

hi i i m 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
    });
}

之后，我呼吁像这样的反应函数

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

Answer 2

您的todomanupulatureata应该看起来像这样。

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

Answer 3

首先，我认为您不需要使用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);
    });
}