如何创建依赖其他控件的Leva控件？解决初始化访问报错问题

错误原因 #

你碰到的问题根源有两点：

• React初始化useState时会立刻调用computeRandomDataset，但这时候levaConfig还没通过useControls完成初始化，自然访问不到。
• computeRandomDataset直接引用了未初始化的levaConfig，触发了变量提升导致的引用错误。

修复方案 #

核心思路是让生成数组的逻辑不直接依赖levaConfig，而是通过参数接收长度值，同时调整初始状态的生成方式：

import { useState } from "react";
import { useControls, button } from "leva";

// 先定义Datum类型，避免类型报错
type Datum = number;

function App() {
  // 初始状态用默认长度300（和Leva配置的默认值保持一致）
  const [dataset, setDataset] = useState<Datum[]>(() => createDataset(300));

  const levaConfig = useControls({
    "update dataset": button(() => {
      // 点击按钮时直接传入当前的datasetLength值
      setDataset(createDataset(levaConfig.datasetLength));
    }),
    datasetLength: {
      value: 300,
      min: 0,
      max: 500,
      step: 1,
    },
  });

  return <h1>Vite + React</h1>;
}

export default App;

function createDataset(datasetLength: number) {
  const dataset = [];
  for (let i = 0; i < datasetLength; i++) {
    dataset.push(Math.random());
  }
  return dataset;
}

额外优化（可选） #

如果需要拖动datasetLength滑块时自动更新数组，可以加个useEffect监听值变化：

import { useState, useEffect } from "react";
import { useControls, button } from "leva";

type Datum = number;

function App() {
  const [dataset, setDataset] = useState<Datum[]>(() => createDataset(300));

  const levaConfig = useControls({
    "update dataset": button(() => {
      setDataset(createDataset(levaConfig.datasetLength));
    }),
    datasetLength: {
      value: 300,
      min: 0,
      max: 500,
      step: 1,
    },
  });

  // 监听datasetLength变化，自动更新数组
  useEffect(() => {
    setDataset(createDataset(levaConfig.datasetLength));
  }, [levaConfig.datasetLength]);

  return <h1>Vite + React</h1>;
}

export default App;

function createDataset(datasetLength: number) {
  const dataset = [];
  for (let i = 0; i < datasetLength; i++) {
    dataset.push(Math.random());
  }
  return dataset;
}

这样修改后，既解决了初始化时的引用错误，也能保证按钮点击和（可选的）滑块变化时，正确生成对应长度的随机数组。

内容的提问来源于stack exchange，提问作者marielle