在reactjs中生成随机数组

Question

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

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

这段代码在我单独测试时似乎有效。我可以调用它多少次我想要它仍然有效。

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

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 函数不起作用？

Answer 1

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

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

Answer 2

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

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

在reactjs中生成随机数组

Generating random array in reactjs

javascript

frontend

typescript

reactjs