ReactJS - 从 2 个单独的 useState 设置变量

Question

背景

我正在尝试使用onClick() 根据两个单独的按钮组设置一个变量来更新useState。

第一组将记录“data1”、“data2”或“data3”。

第二组将记录“0”、“1”或“3”。

我正在寻找最终结果是一个变量，我可以使用它来选择要提取哪组数据。

变量应该类似于“data10”。 （在这两个组中都选择了按钮 1。）

当前代码

  const [bigChartData, setbigChartData] = React.useState("data1");
  const setBgChartData = (name) => {
    setbigChartData(name);
    (name+bigChartTime);
  };
  const [bigChartTime, setbigChartTime] = React.useState("0");
  const setBgChartTime = (name) => {
    setbigChartTime(name);
    console.log(bigChartData+(name));
  };

下面的代码进一步展示了动态数据

                <div className="chart-area">
                  <Line
                    data={chartExample1[bigChartData]}
                    options={chartExample1.options}
                  />
                </div>

问题

我收到以下错误

期待一个赋值或函数调用，却看到一个表达式 no-unused-expressions

我知道这告诉我我不能在这里使用表达式，但我不知道如何构建它

我尝试过的

• 围绕此设置{ }，但它仍然给出相同的错误。
• 围绕此设置( )，但它仍然给出相同的错误。
• 使用 console.log(name+bigChartTime); 代替第 4 行，它将我期望的信息无误地呈现给控制台。

如果有任何方法可以解决这个问题，或者如果我需要以不同的方式返工，我们将不胜感激！

Answer 1

您的代码有点乱，您想要实现的目标不是很清楚。我建议您将状态变量放在一起，并在视觉上将它们与事件处理程序分开。此外，将事件处理程序名称与变量状态设置器区分开来：setbigChartData 和 setBgChartData 的名称非常相似，因此很难跟踪代码中发生的事情。

现在，正如您已经注意到的，您会收到 Expected an assignment or function call and instead saw an expression no-unused-expressions 错误，因为您使用的表达式基本上什么都不做：(name+bigChartTime);。我不确定您是想将其分配给变量还是？

您需要bigChartData 和bigChartTime 的串联结果。为此，您不需要单独的状态变量。您应该避免为基于其他状态变量的结果引入单独的状态变量，尤其是当该结果易于计算时。所以，我建议你只使用：

`${bigChartData}${bigChartTime}`

当您需要连接结果或在使用前存储在一个简单的非状态变量中时。最后，你只需要这样的东西：

const [bigChartData, setbigChartData] = React.useState("data1");
const [bigChartTime, setbigChartTime] = React.useState("0");

const handleChartDataChange = (name) => {
    setbigChartData(name);
};

const handleChartTimeChange = (name) => {
    setbigChartTime(name);
};

由于您没有提供有关连接结果用法的更多上下文，因此这通常是要走的路。

---

旁注：你的问题的格式做得很好。这是一种罕见的情况。不过，您应该在问题清晰度上多做一些工作。