如何根据React中对象数组中的其他键值更新对象键值?

Question

我需要了解如何根据React中对象数组中的其他键值更新对象键值。假设我有两个不同的输入字段，它们以某种方式与下面格式化的对象相连接，这个对象基本上负责在输入字段中输入内容时改变图形的行为。下面的对象传递到图形组件，以显示每当我们在2个输入字段中输入内容时的变化。

import React, {useState} from "react";
import ReactDOM from "react-dom";
import { GaugeChart } from "@carbon/charts-react";
import "@carbon/charts/styles.css";
// in the data object graph behavior will update based on 
input provided in two input field and that will happen based on group key value
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) => {

}
return (
<>
<GaugeChart
data={graph.data}
options={graph.options}>
</GaugeChart>
<br />
<form>
<input value={formData.min} onChange={handleChange}  />
<input value={formData.max} onChange={handleChange}/>
</form>
</>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

假设您的状态中的min是value,max是delta，我会稍微重构一下。因为你的graphObj是一个常量，我们只是想添加formData，我们可以使用useMemo，我们重制graphOptions对象每次表单数据更新。

import React, { useState, useMemo } 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 [formData, setFormData] = useState({
value: 40,
delta: 1000,
});
const handleChange = (e) => {
const { name, value } = e.target;
// update the form data
setFormData({ ...formData, [name]: value });
};
// add form data to graph object
const graphData = useMemo(() => {
// formdata to { group: key, value: value } type
return Object.keys(formData).map((key) => ({
group: key,
value: formData[key],
}));
}, [formData]);
return (
<>
<GaugeChart data={graphData} options={graphObj.options}></GaugeChart>
<br />
<form>
<input name={"value"} value={formData.value} onChange={handleChange} />
<input name={"delta"} value={formData.delta} onChange={handleChange} />
</form>
</>
);
};
export default App;