useState 设置迭代数据

Question

我需要做一些绘图，这需要数据以某种方式呈现，即：

[{
    type: "box",
    y: data[1],
    name: "1",
    boxpoints: "all",
  },
  {
    type: "box",
    y: data[2],
    name: "2",
    boxpoints: "all",
  },
   {
    type: "box",
    y: data[3],
    name: "3",
    boxpoints: "all",
}]

我的数据是通过 useState 挂钩在其他地方设置的：

const [data, setData] = useState([])

现在我想设置另一个 useState，其中包含上述内容，即手动方法是：

const [plotData, setPlotData] = useState([])

setPlotData([{
    type: "box",
    y: data[1],
    name: "1",
    boxpoints: "all",
  },
  {
    type: "box",
    y: data[2],
    name: "2",
    boxpoints: "all",
  },
   {
    type: "box",
    y: data[3],
    name: "3",
    boxpoints: "all",
}])

然后一切正常。问题是我事先不知道 data 的长度。所以在这种情况下，我知道它是 3，并且可以手动完成，但它可能是另一个值。因此我想遍历它，也让代码更干净。

但我不确定我是如何在 useState.

上创建这个 iteration/list 词典的

Answer 1

这听起来像是 memo hook 的完美用法，它可以根据状态依赖性创建计算值。

const plotData = useMemo(
  () =>
    data.slice(1).map((y, i) => ({
      y,
      name: (i + 1).toString(),
      type: "box",
      breakpoints: "all",
    })),
  [data]
);

使用 data.slice(1) 是因为根据您的示例，您似乎想跳过 data 中的第一个条目。

useState 设置迭代数据

useState to set iterated data

reactjs

react-hooks