.unshift不是函数

Question

我刚刚开始学习React JS，我正在尝试一个简单的项目，我点击一个按钮，一个随机数应该被添加到数组中。下面是我的代码:

function App() {

const [cache2, setCache2] = useState([])
const nextNumber = () => {
const randomNr = Math.floor(Math.random() * 10)
const newCache = cache2.push(randomNr)
setCache2(newCache)    
console.log(cache2)
}
return (
<div className='App'>
<button onClick = {nextNumber}>Next Number</button>
</div>
);
}

然而，它抛出一个">cache2。push不是一个函数";错误。我找不出是什么问题。有人能帮帮我吗?

Answer 1

Array#push()是一个突变函数，它返回您推送的元素，而不是原始数组。因此，setCache2(newCache)使cache2成为一个数字而不是一个数组。因此，从数字调用push()会抛出此错误。

最好创建一个新的数组，并使用扩展操作符设置状态:

const nextNumber = () => {
const randomNr = Math.floor(Math.random() * 10)
setCache2([...cache2, randomNr])
console.log(cache2)
}