在ReactJS中更新陣列

我正在使用反應 js。并在類組件中作業。了解當前情況。我想告訴你這個函式在做什么。

好吧，
假設我有商店陣列和作業日陣列。

shop:[ {id:1,name:"S1"} ]

days = [ {id:1,name:"Monday"}, {id:2,name:"Tuesday"}, {id:3,name:"Wednesday"}, {id:4,name:"Thursday"}, ... ]

步驟1：

現在我從days陣列中選擇了前兩天并將它們存盤在一個新陣列中。讓我們用activeModalDays呼叫該陣列

activeModalDays = [ {id:1,name:"Monday"}, {id:2,name:"Tuesday"} ],

第2步：

現在我們有一個最后一個陣列，它將存盤所需物件的最終形式的串列。讓我們稱之為

timingDetails = []

第 3 步

現在創建一個映射 activeModalDays 和表單物件并回傳它的函式。

setTimeFunc =()=>{
    const timingDetails = this.state.activeModalDays.map((day) => {
        let start_time = this.state.start_time
        let close_time = this.state.close_time

        console.log("I'm in it 3",day.name)
        let obj = {
            shop:this.state.activePartition,
            day:day.name,
            start_time:start_time,
            close_time:close_time
        }

        let daytime= this.state.timingDetails.find((item)=>item.day===obj.day&&item.partition===obj.partition)
        console.log("din ",daytime)
        
        if (daytime) {
            let daytimeClone = {...daytime}
            console.log("deyare ",daytimeClone)
            console.log("true")

            if (start_time !==daytimeClone.start_time) {
            daytimeClone.start_time=start_time
            }
            if (close_time!==daytimeClone.close_time) {
            daytimeClone.close_time=close_time
            }    
            return daytimeClone
        } 
        else {
            return obj
        }

    })

    this.setState({ timingDetails: [...timingDetails] ,activeModalDays:[]});
}

在結束時間詳細資訊 回傳

[
{"close_time": 2022-09-06T11:14:09.926Z, "day": "Monday", "full_day": false, "shop": 1, "start_time": 2022-09-06T14:14:09.926Z},
 {"close_time": 2022-09-06T11:14:09.926Z, "day": "Tuesday", "full_day": false, "shop": 1, "start_time": 2022-09-06T14:14:09.926Z}
]

到目前為止，這是寫輸出。但是現在當我重復這個程序和新的日子，比如星期五和星期六。星期一和星期二的最終物件會自動從timingDetails中洗掉。

uj5u.com熱心網友回復：

如果你想堆疊timingDetails狀態，你應該修改你的setState喜歡下面

this.setState({ timingDetails: [...this.state.timingDetails,...timingDetails] ,activeModalDays:[]});

或者使用之前的timingDetailsin狀態setState

this.setState((prevState) => ({ timingDetails: [...prevState.timingDetails,...timingDetails] ,activeModalDays:[]}));

uj5u.com熱心網友回復：

etTimeFunc =()=>{

    const timingDetailsClone = [...this.state.timingDetails]


    const timingDetails = this.state.activeModalDays.map((day) => {

        let start_time = this.state.start_time
        let close_time = this.state.close_time

        console.log("I'm in it 3",day.name)
        let obj = {
            shop:this.state.activePartition,
            day:day.name,
            start_time:start_time,
            close_time:close_time
        }

        let daytime = timingDetailsClone.find((item)=>item.day===obj.day&&item.partition===obj.partition)
        console.log("din ",daytime)
        
        if (daytime) {
            let daytimeClone = {...daytime}
            console.log("deyare ",daytimeClone)
            console.log("true")

            if (start_time !==daytimeClone.start_time) {
            daytimeClone.start_time=start_time
            }
            if (close_time!==daytimeClone.close_time) {
            daytimeClone.close_time=close_time
            }    
            return daytimeClone
        } 
        else {
            return obj
        }

    })

    this.setState({ timingDetails: [...this.state.timingDetails,...timingDetailsClone,] ,activeModalDays:[]});
}

標籤：javascript 节点.js 反应 数组 反应式

上一篇：在另一個函式中呼叫一個函式

下一篇：如何從我的api的回應中正確地將products變數分配給陣列