javascript - 如何创建一个新对象而不是改变它 - javascript？

Question

在这里我有一个对象，即ApiData1。里面有color键值对的地方properties。我正在根据ApiData2value更改颜色值numberOfProjects，并且有一个numberOfProjects值位于一组范围之间的范围，我正在更新color值。它工作正常。但更新后，我将此值设置为 [React] 状态。但是，在初始加载时，颜色已更新并且工作正常。单击按钮后，我正在使用不同的 ApiData2 值执行此过程。ApiData1color值得到更新。但反应没有检测到变化。

我怀疑是因为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 一直在updatePropertiesfunction 上更新它，但它没有反映在 newData 对象中。我仍然得到 oldObject，而不是新的。

这是链接

标签： javascriptarraysreactjsjavascript-objects

Answer 1

您没有使用newData.map. 此外，您不需要嵌套地图，因为您想要操作的只是一个特定的对象。

您需要的是找到该对象并更新它。利用Array.prototype.find查找状态的相关匹配对象，然后通过循环使用范围数组对其进行更新

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