如何在react.js中复制变量、函数和状态

Question

我想知道函数和变量是如何重复的，并使用我正在使用它们的状态。

这是parents组件，所以我可以将props传递给另一个组件。这就是代码：

const [title, setTitle] = useState("");
const [getId, setGetId] = useState([]);
const [value, setValue] = useState([]);
const [info, setInfo] = useState([]);
const [disabled, setDisabled] = useState("");
const [disabledTwo, setDisabledTwo] = useState("");
const clickCheck = header => e => {
setValue([...value, e.currentTarget.value]);
setGetId([...getId, e.currentTarget.id]);
};
let chartData = {
labels: ["", "", "", "", "", "", "", ""], //
datasets: [
{
label: title,
data: [1, 1, 1, 1, 1, 1, 1, 1], //
backgroundColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
],
},
],
};
if (value[0] === "x") {
chartData.labels = info.map(i => i[getId[0]]).slice(1, undefined);
}
if (value[0] === "y") {
chartData.datasets[0].data = info.map(i => i[getId[0]]).slice(1, undefined);
}
if (value[1] === "x") {
chartData.labels = info.map(i => i[getId[1]]).slice(1, undefined);
}
if (value[1] === "y") {
chartData.datasets[0].data = info.map(i => i[getId[1]]).slice(1, undefined);
}
const changeData = () => {
if (value[0] === "x" || value[1] === "x") {
setDisabled("true");
}
if (value[0] === "y" || value[1] === "y") {
setDisabledTwo("true");
}
};
useEffect(changeData, [value]);
const resetArray = () => {
setValue([]);
setGetId([]);
setDisabled("");
setDisabledTwo("");
};
const chartArray = [
<Line
key="o"
data={chartData}
options={{ responsive: true, maintainAspectRatio: false }}
/>,
<Bar
key="p"
data={chartData}
options={{ responsive: true, maintainAspectRatio: false }}
/>,
<Pie
key="q"
data={chartData}
options={{ responsive: true, maintainAspectRatio: false }}
/>,
<Radar
key="r"
data={chartData}
options={{ responsive: true, maintainAspectRatio: false }}
/>,
<Doughnut
key="s"
data={chartData}
options={{ responsive: true, maintainAspectRatio: false }}
/>,
<Scatter
key="t"
data={chartData}
options={{ responsive: true, maintainAspectRatio: false }}
/>,
<PolarArea
key="u"
data={chartData}
options={{ responsive: true, maintainAspectRatio: false }}
/>,
<Bubble
key="v"
data={chartData}
options={{ responsive: true, maintainAspectRatio: false }}
/>,
];

我想做的就是把整个东西复制粘贴到下面这样：

....
const [disabled2, setDisabled2] = useState("");
const [disabledTwo2, setDisabledTwo2] = useState("");
const clickCheck2 = title => e => {
setValue2([...value2, e.currentTarget.value]);
setGetId2([...getId2, e.currentTarget.id]);
};
let chartData2 = {
labels: ["", "", "", "", "", "", "", ""], 
datasets: [
{
......

但问题是我得多用7次。代码变得越来越大。。所以我想知道如何在不复制粘贴的情况下复制它。

事先非常感谢。

Answer 1

具有setState的类组件可能对您想要的更有用