每次用戶點擊按鈕時，我都試圖在 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 函式不起作用嗎？
uj5u.com熱心網友回復：
問題是 event.target.value 給出了一個字串，你將它作為一個應該是數字的大小傳遞。要修復，只需將其轉換為數字即可。
handleArraySizeChange = (event: any) => {
this.setState({arraySize: Number(event.target.value)});
}
uj5u.com熱心網友回復：
我嘗試在此 URL 中使用上述函式：https : //codesandbox.io/s/brave-bardeen-7slbh?file=/ src/ App.js
我控制臺記錄了陣列 & 我可以看到它按預期作業
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/369886.html
標籤：javascript 反应 打字稿 前端