在 reactjs 中生成随机数组答案

【问题标题】：Generating random array in reactjs在 reactjs 中生成随机数组
【发布时间】：2022-01-06 08:57:06
【问题描述】：

每次用户点击按钮时，我都会尝试在 reactjs 中生成特定大小的随机数组。生成数组的代码如下：

const generateArray = (arraySize: number): number[] => {
  return [...Array(arraySize)].map(() => ~~(1 + Math.random() * 100) );  
}

当我单独测试这段代码时，它似乎可以工作。我可以调用它多少次，它仍然可以工作。

但是，当我将这个函数与一个简单的 reactjs 代码一起使用时，它只会在第一次工作，然后它会在用户单击按钮的所有其他时间返回一个元素数组。

class App extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      arraySize: 30,
      array: generateArray(30)
    };
  }
  
  resetArray = (size: number) => {
    this.setState({
      ...this.state,
      array: generateArray(size)
    })
  }

  handleArraySizeChange = (event: any) => {
    this.setState({arraySize: event.target.value});
  }

  render() {
    return (
      <div className="App">
        <input type="range" min="0" max="100" value={this.state.arraySize} onChange={this.handleArraySizeChange}/>
        <button onClick={() => this.resetArray(this.state.arraySize)}>Generate new array</button>
        {this.state.array.map( (el: any) => 
            <div >
              {el}
            </div>
        )}
      </div>
    );
  }
}
export default App;

使此代码有效的唯一方法是像这样更改 generateArray 函数：

const generateArray = (arraySize: number): number[] => {
  var array = [];
  for(let i = 0; i < arraySize; i++)
    array.push(~~(1 + Math.random() * 100));
  return array;
}

谁能帮我理解为什么第一个 generateArray 函数不起作用？

【问题讨论】：

标签： javascript reactjs typescript frontend

【解决方案1】：

问题是 event.target.value 提供了一个字符串，而您将其作为应该是数字的大小传递。要解决此问题，只需将其转换为数字即可。

handleArraySizeChange = (event: any) => {
  this.setState({arraySize: Number(event.target.value)});
}

【讨论】：

谢谢，问题解决了。

【解决方案2】：

我尝试在这个 URL 中使用上述函数：https://codesandbox.io/s/brave-bardeen-7slbh?file=/src/App.js

我在控制台记录了阵列，我可以看到它按预期工作

【讨论】：

请编辑答案以包含回答问题的代码的相关部分。虽然很高兴看到它的行动答案不应该依赖外部资源。
我刚刚尝试使用您在反应代码沙箱中提供的 generateArray 函数，它按预期工作。
实际上，正如我之前所说，函数 generateArray 在第一次运行时起作用，问题是当用户更改输入范围然后单击按钮时。查看此代码沙箱：link。控制台显示元素个数正确，但函数没有正确生成数组。
问题出在这里 [...Array(arraySize)]。从您第二次按下“生成数组”按钮而不是数字时，此处的 arraySize 变量将作为字符串传递。因此，与其给出一个未定义的arraySize 数组，不如给出一个大小为1 的数组，其中arraySize 字符串位于变量中。因此，通过将上述语句更改为此 [...Array(Number(arraySize))]。我们可以将数字而不是字符串传递给它，这解决了我猜的问题。查看此链接中打印的控制台codesandbox.io/s/sweet-dawn-ymx6z?file=/src/App.js