Question

我正在尝试使用useState挂钩更改状态。我的钩子看起来像。

const [data, setData] = useState(initialDataState);

初始状态：

const initialDataState = {
  EMAIL_TYPE: "",
  NAME_TYPE: "",
  GENDER_TYPE: "",
  ZIP_TYPE: "",
  DEVICES_TYPE: []
};

我从具有2个props状态类型的函数中调用setData进行更改和赋值。我的功能：

const handleChange = (key, value) => {
    setData(prevState => {
      return { ...prevState, ...(prevState[key] = value) };
    });
  };

作为结果，当我调用handleChange函数时，我无法正确更改值，因为无法在prevState中获得正确的键。

我的问题是：“在获取要更改其值而不更改状态的键的情况下，如何正确更改状态”

Answer 1

您需要传递现有状态和要更新的密钥

    var groupData = [
        {
            "name": "America",
            "color": "#7DB378",
            "data": [{
                "title": "USA",
                "id": "US",
                "customData": "Data 1"
            }, {
                "title": "Mexico",
                "id": "MX",
                "customData": "Data 2"
            }]
        },
        {
            "name": "Europe",
            "color": "#1AE5B9",
            "data": [{
                "title": "Spain",
                "id": "ES",
                "customData": "Data 3"
            }]
        },
        {
            "name": "Asia",
            "color": "#193387",
            "data": [{
                "title": "China",
                "id": "CN",
                "customData": "Data 4"
            }]
        }
    ];
    var excludedCountries = ["AQ"]; // Exclude Antarctica
    // Create a series for each group, and populate the above array
    groupData.forEach(function (group) {
        var series = chart.series.push(new am4maps.MapPolygonSeries());
        series.name = group.name;
        series.useGeodata = true;
        var includedCountries = [];
        group.data.forEach(function (country) {
            includedCountries.push(country.id);
            excludedCountries.push(country.id);
        });
        series.include = includedCountries;
        series.fill = am4core.color(group.color);
        series.setStateOnChildren = true;
        var seriesHoverState = series.states.create("hover");
        // Country shape properties & behaviors
        var mapPolygonTemplate = series.mapPolygons.template;
        // Events
        mapPolygonTemplate.events.on("hit", function(ev) {
            // zoom to an object
            ev.target.series.chart.zoomToMapObject(ev.target);
        });
    });

如何使用useState React正确更改状态对象值之一

1 个答案: