时间戳

首页 > 解决方案 > 解构对象反应

javascript - 解构对象反应

问题描述

我刚开始使用 REACT。我正在处理一些图表，每个图表都有几个单选按钮。现在根据单击哪个图表的单选按钮，我更新该图表上的数据。这是处理函数的片段

 switch (event.target.name) {
  case "speedGraph":
    const speedGraph = {
      dataSet: graphData["speedGraph"]["dataSet"],
      selectedParam: event.target.value,
    };

    setgraphData({
      ...graphData,
      speedGraph,
    });
    break;

  case "distanceGraph":
    const distanceGraph = {
      dataSet: graphData["distanceGraph"]["dataSet"],
      selectedParam: event.target.value,
    };
    
    setgraphData({
      ...graphData,
      distanceGraph,
    });
    break;
}

graphData 对象如下。graphdata 对象中还有很多其他的图

graphData = {

speedGraph:{dataset:{}, selectedParam: "someValue"},
distanceGraph:{dataset:{}, selectedParam: "someValue"}

}

我可以看到这里有一个模式，我重复了很多事情。这是因为我必须在setgraphData中解构时对所选图形的数据进行硬编码。您能否建议我如何直接使用 graphName 而不是硬编码？

标签： javascriptreactjs

解决方案

您可以使用event.target.name从graphData对象中获取项目。我发现先给它起一个更有意义的名字会很有帮助。

然后switch不再需要 ，假设event.target.name总是可以在 中找到graphData。

方法如下：

const graphType = event.target.name;
const graphItem = {
  dataSet: graphData[graphType].dataSet,
  selectedParam: event.target.value,
};
setgraphData({
  ...graphData,
  [graphType]: graphItem,
});

推荐阅读