.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() 是一个突变函数，returns 是你推送的元素，而不是原始数组。因此 setCache2(newCache) 使 cache2 成为数组以外的数字。所以从一个号码调用 push() 会抛出这个错误。

最好创建一个新数组并使用spread operator设置状态:

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

.unshift 不是函数

.unshift is not a function

arrays

push

reactjs