React中如何根据对象数组内其他键值更新目标键值？

要实现输入框内容同步更新图表数据，核心是根据group键匹配数组中的对象，更新对应value值，同时遵循React状态不可变更新的原则，具体实现如下：

关键修改步骤 #

1. 给两个输入框添加name属性，用于区分不同输入项
2. 完善handleChange函数，先同步更新表单状态，再更新图表数据数组

修改后的完整代码 #

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { GaugeChart } from "@carbon/charts-react";
import "@carbon/charts/styles.css";

const graphObj = {
  data: [
    {
      "group": "value",
      "value": 40
    },
    {
      "group": "delta",
      "value": 1000
    }
  ],
  options: {
    "resizable": true,
    "height": "250px",
    "width": "100%",
    "gauge": {
      "type": "semi",
      "status": "danger"
    }
  }
};

const App = () => {
  const [graph, setGraph] = useState(graphObj); 
  const [formData, setFormData] = useState({
    min: 40,
    max: 1000
  })

  const handleChange = (e) => {
    const { name, value } = e.target;
    // 先更新表单状态
    const newFormData = { ...formData, [name]: Number(value) };
    setFormData(newFormData);

    // 更新图表数据数组：根据group匹配对象，更新对应value
    setGraph(prevGraph => ({
      ...prevGraph,
      data: prevGraph.data.map(item => {
        if (item.group === "value") {
          return { ...item, value: newFormData.min };
        }
        if (item.group === "delta") {
          return { ...item, value: newFormData.max };
        }
        return item;
      })
    }));
  }

  return (
    <>
      <GaugeChart
        data={graph.data}
        options={graph.options}>
      </GaugeChart>
      <br />
      <form>
        <input 
          name="min"
          value={formData.min} 
          onChange={handleChange} 
          type="number"
        />
        <input 
          name="max"
          value={formData.max} 
          onChange={handleChange}
          type="number"
        />
      </form>
    </>
  );
}

export default App;

ReactDOM.render(<App />, document.getElementById("root"));

核心逻辑说明 #

• 输入框标识：通过name属性绑定formData的键名，在handleChange中可以直接通过[name]定位要更新的表单字段
• 不可变更新：
  • 更新formData时使用展开运算符{...formData}创建新对象，避免直接修改原状态
  • 更新图表数据时，使用map遍历原数组，匹配到对应group的对象后，同样用展开运算符创建新对象替换原对象，保证数组的不可变性
• 类型转换：输入框的值默认是字符串，通过Number(value)转为数字类型，匹配图表数据的数值要求

内容的提问来源于stack exchange，提问作者James