數組內對象的reactJs setState更改屬性

Question

我有點卡住了。 我嘗試用另一個數組中的另一個對象覆蓋一個數組中的某個對象：

onStepsLayoutChange = (layout) => {
        console.log("The new layout is", layout); //Array
        this.setState((prevState) => ({
            layout: layout,
            stepsData: prevState.stepsData.map(step => {
                layout.map(l => {
                  if(step.identifier === parseInt(l.i)){
                      console.log("Match", l, step); // "l" is not empty and actually matches only if "id" is identical
                      return {
                          ...step,
                          layout: l //I want to override "layout" with the current layout "l"
                      }
                  }
                });
                return step
            })
        }), () => console.log("LayoutChange:", this.state.layout, this.state.stepsData)); // "layout" in each step is empty
    };

在這種情況下我的失敗是什么？

Answer 1

如果stepsData必須是一個數組數組，則會忘記一個返回值：

onStepsLayoutChange = (layout) => {
        console.log("The new layout is", layout); //Array
        this.setState((prevState) => ({
            layout: layout,
            stepsData: prevState.stepsData.map(step => {
                return layout.map(l => { //here <---
                  if(step.identifier === parseInt(l.i)){
                      console.log("Match", l, step); // "l" is not empty and actually matches only if "id" is identical
                      return {
                          ...step,
                          layout: l //I want to override "layout" with the current layout "l"
                      }
                  }
                });
                return step
            })
        }), () => console.log("LayoutChange:", this.state.layout, this.state.stepsData)); // "layout" in each step is empty
    };

Answer 2

問題是，您缺少＃array.map的默認行為。 對於每個數組，值映射默認將返回一些undefined值。 您正在map內運行map，因此stepData的最終值將是：

[[...], [...], [....] ....]

而不是使用嵌套映射，請使用＃array.findIndex或＃array.find並返回值。

像這樣寫：

stepsData: prevState.stepsData.map(step => {
    let index;
    index = layout.findIndex(l => step.identifier === parseInt(l.i));

    if(index >= 0){
        return {
            ...step,
            layout: layout[index]
        }
    }

    return step;
})

檢查以下代碼段：

 let a = [1,2,3,4,5]; let b = [2,3]; let result = a.map(i => { return b.map(j => { if(i === j) return 0; }) return i; }) console.log(result);