如何創建一個新的 Object 而不是對其進行變異 - javascript？

Question

在這里，我有一個 Object 即ApiData1 。 它在properties中有color鍵值對。 我正在根據ApiData2值numberOfProjects更改顏色值，並且具有numberOfProjects值位於一組范圍之間的范圍，我正在更新color值。 它工作正常。 但是更新后，我在 state [React] 中設置了這個值。 但是，在初始加載時，顏色已更新並且工作正常。 單擊按鈕后，我正在使用不同的 ApiData2 值執行此過程。 ApiData1 color值得到更新。 但反應沒有檢測到變化。

我懷疑是因為ApiData1發生了變異。 它沒有選擇道具更改。有什么方法可以用它創建一個新的ApiData1值，而不是改變。 無論如何要重新創建這個邏輯。

非常感謝您的幫助或建議。

提前致謝。

這是工作演示鏈接

let ApiData1 = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 10,
                "stateId": 10,
                "name": "Tamil Nadu",
                "code": "TN"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 11,
                "stateId": 11,
                "name": "Karnataka",
                "code": "KA"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 12,
                "stateId": 12,
                "name": "Pondicherry",
                "code": "PY"
            }
        }
    ]
}

let ApiData2 = [
    {
        id: 10,
        name: "Tamil Nadu",
        code: "TN",
        latitude: 29.9964948,
        longitude: 81.6855882,
        latestMetric: {
            stateId: 10,
            year: 0,
            numberOfProjects: 1433,
        }
    },
    {
        id: 11,
        name: "Karnataka",
        code: "KA",
        latitude: 21.9964948,
        longitude: 82.6855882,
        latestMetric: {
            stateId: 11,
            year: 0,
            numberOfProjects: 3500,
        }
    },
    {
        id: 12,
        name: "Pondicherry",
        code: "PY",
        latitude: 22.9964948,
        longitude: 87.6855882,
        latestMetric: {
            stateId: 12,
            year: 0,
            numberOfProjects: 5500,
        }
    }
];

function updateColor() {
    function updateColorValue(colorJsonObject, colorValue) {
        let updatedProperties = {
            ...colorJsonObject.properties,
            color: colorValue
        };
        colorJsonObject.properties = updatedProperties;
        return { ...colorJsonObject };
    }

    let range = [
        {
            "Minimum": 1,
            "Maximum": 2000,
            "color": 1
        },
        {
            "Minimum": 2000,
            "Maximum": 4000,
            "color": 2
        },
        {
            "Minimum": 4000,
            "Maximum": 6000,
            "color": 3
        }
    ]

    ApiData1.features.map(colorObject =>
        ApiData2.map(apiData => {
            if (
                colorObject.properties.stateId === apiData.latestMetric.stateId
            ) {
                range.map(i => {
                    if (
                        apiData.latestMetric.numberOfProjects >= i.Minimum &&
                        apiData.latestMetric.numberOfProjects <= i.Maximum
                    ) {
                        updateColorValue(colorObject, i.color);
                    }
                });
            }
        })
    );
    return ApiData1;
}

let colorValue = updateColor();

console.log(colorValue);

我做了這樣的事情來創建一個新對象，而不是改變它，

  
     function updateProperties(colorJsonObject, colorValue) {
        let updatedProperties = {
            ...colorJsonObject.properties,
            color: colorValue
        };
        console.log(updatedProperties)
        return updatedProperties;
        
    }
    let newData = {...ApiData1}

    newData.features.map(colorObject =>
        ApiData2.map(apiData => {
            if (
                colorObject.properties.stateId === apiData.latestMetric.stateId
            ) {
                range.map(i => {
                    if (
                        apiData.latestMetric.numberOfProjects >= i.Minimum &&
                        apiData.latestMetric.numberOfProjects <= i.Maximum
                    ) {
                    
                            let value = updateProperties(colorObject, i.color)
                        return {...colorObject,properties:value}
                    }
                });
            }
        })
    );
    return newData;
}

let colorValue = updateColor();

console.log(colorValue);

value 一直在updateProperties function 上更新它，但它沒有反映在 newData object 中。 我仍然得到 oldObject，而不是新的。

這是鏈接

Answer 1

您沒有使用newData.map的結果。 此外，您不需要嵌套的 map，因為您想要操作的只是特定的 object。

您需要找到 object 並更新它。 利用Array.prototype.find為 state 找到相關的匹配 object，然后通過循環使用范圍數組對其進行更新

 let ApiData1 = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "MultiPolygon" }, "properties": { "color": 1, "id": 10, "stateId": 10, "name": "Tamil Nadu", "code": "TN" } }, { "type": "Feature", "geometry": { "type": "MultiPolygon" }, "properties": { "color": 1, "id": 11, "stateId": 11, "name": "Karnataka", "code": "KA" } }, { "type": "Feature", "geometry": { "type": "MultiPolygon" }, "properties": { "color": 1, "id": 12, "stateId": 12, "name": "Pondicherry", "code": "PY" } } ] } let ApiData2 = [ { id: 10, name: "Tamil Nadu", code: "TN", latitude: 29.9964948, longitude: 81.6855882, latestMetric: { stateId: 10, year: 0, numberOfProjects: 1433, } }, { id: 11, name: "Karnataka", code: "KA", latitude: 21.9964948, longitude: 82.6855882, latestMetric: { stateId: 11, year: 0, numberOfProjects: 3500, } }, { id: 12, name: "Pondicherry", code: "PY", latitude: 22.9964948, longitude: 87.6855882, latestMetric: { stateId: 12, year: 0, numberOfProjects: 5500, } } ]; function updateColor() { function updateColorValue(colorJsonObject, colorValue) { let updatedProperties = {...colorJsonObject.properties, color: colorValue }; colorJsonObject.properties = updatedProperties; return {...colorJsonObject }; } function updateProperties(colorJsonObject, colorValue) { let updatedProperties = {...colorJsonObject.properties, color: colorValue }; console.log(updatedProperties) return updatedProperties; } let range = [ { "Minimum": 1, "Maximum": 2000, "color": 1 }, { "Minimum": 2000, "Maximum": 4000, "color": 2 }, { "Minimum": 4000, "Maximum": 6000, "color": 3 } ] let newData = {...ApiData1, features: ApiData1.features.map(colorObject => { const apiData = ApiData2.find(apiData => { if ( colorObject.properties.stateId === apiData.latestMetric.stateId ) { return true; } return false; }); let newValue; range.forEach(i => { if ( apiData.latestMetric.numberOfProjects >= i.Minimum && apiData.latestMetric.numberOfProjects <= i.Maximum ) { let value = updateProperties(colorObject, i.color) newValue = {...colorObject,properties:value} } }); return newValue; }) } return newData; } let colorValue = updateColor(); console.log(colorValue);