如何使用 useState 存储多个关键对象？答案

【问题标题】：How to use useState to store multiple key objects?如何使用 useState 存储多个关键对象？
【发布时间】：2022-02-11 23:15:01
【问题描述】：

我有一个加密货币烛台图，它有 1 分钟、30 分钟等不同的时间范围。我目前有

const [data, setData] = useState[]
  useEffect(() => {

    const fetchPrice = async () => {
      const { data } = await axios.get(`/api/apii?slug=${poolName[0].pool_id}&timeframe=`${1h}``); // default is 1h

      const btcusd = data.data.results.map(
        (d) => {
          return {
            open: d.open,
            close: d.close,
            low: d.low,
            high: d.high,
            time: toDateStamp(d.datetime),
          };
        }
      );
      setData(btcusd)
    };

    fetchPrice()
  }, []);

以上是用户访问时的初始状态，他或她将看到一个 1 小时图表数据。所以有这个 onClick 按钮，它将根据他选择的时间范围获取并设置新状态。如果我在一个时间范围内设置数据，它可以工作，但如果我设置另一个时间范围，我如何将它们分开？

编辑：

我的坏人，我没有问题让 useffect 再次运行，因为每当用户点击新的时间范围时，我都有另一个 useeffect 用于此目的。我的问题是，如果用户选择了他之前选择的时间范围，我如何才能将选择的时间范围存储到一个状态中，然后再次重新使用它们？这很好，因为我可以停止传出网络请求。

【问题讨论】：

请创建一个状态变量来存储poolName 的数组索引，并将其设置为0 或1 或onClick 方法中的其他值。假设您使用：const [chosenIdx, setChosenIdx] = useState(0);（& 在 onClick 内，您根据用户选择 1 或 2 或 0 或其他值使用 setChosenIdx(1)），然后在 useEffect 中将 [] 参数更改为 @ 987654330@.
嘿@thenotorious！签出这个答案它肯定会帮助你stackoverflow.com/questions/63066911/…
@jsN00b7 之前的时间范围也会被存储吗？会很好，这样我就可以在用户再次选择状态时停止获取请求。

标签： javascript reactjs next.js

【解决方案1】：

可以使用 setData() 内部的扩展运算符来获取旧值，然后添加新值，如下所示：

setData( oldValues => [ ...oldValues, newValue ] );

【讨论】：

【解决方案2】：

您可以将数据设置为对象，并将键设置为时间框架 f.e.

const [data, setData] = useState();

const TIMEFRAMES = {
  HOUR: '1h',
  HALF_HOUR: '30min',
};

const hourlyNewData = { price: 1 };

setData((prevdata) => {
  ...prevData,
  [TIMEFRAMES.HOUR]: newData,
});

const minutelyNewData = { price: 1.1 };

setData((prevData) => {
  ...prevData,
  [TIMEFRAMES.HALF_HOUR]: minutelyNewData,
});

// and to access data:
const hourlyData = data[TIMEFRAMES.HOUR];
const minutelyData = data[TIMEFRAMES.HALF_HOUR]

【讨论】：

会存储上一个时间范围吗？这会很好，这样用户就不必重新获取。

【解决方案3】：

您需要将动态值（例如 1h 和 poolName）添加到依赖项数组中，如下所示：

useEffect(() => {
  ...
}, [1h, poolNames])

【讨论】：