javascript - 在 React 中通过数组索引 onClick 递增

Question

尝试在 React 中递增数组的索引时遇到问题。数组中有三个项目，称为“项目”，我使用一个单独的变量来设置索引的状态。

const [projects, setProjects] = useState([
  {
    title: 'hello'
  },
  {
    title: 'hi'
  },
  {
    title: 'bye'
  },

])

const [index, setIndex] = useState({
  i: 0

})

我有一个 JSX 按钮元素，它有一个 onClick 事件处理函数。此函数的目的是递增数组的索引并将其数据显示在屏幕上。

function handleClick(e) {
  if (index.i > 2){
    index.i = 2
  } else {
    setIndex({i: index.i + 1 })
  }
  e.preventDefault() 
}

这个函数工作正常，但只有在index.i达到2之前。如果它超过2，则分页符，因为数组中只有3个项目。函数中的 if 语句不起作用有什么原因吗？我尝试过它的变体，使用 index.i === 0 而不是 >2，但这仍然不起作用。

JSX-

<div>{projects[index.i].title}</div>
<button onClick={handleClick}></button>

请问有人可以帮忙吗？!谢谢

Answer 1

使用项目的长度

首先索引应该是 int 而不是对象。

const [index, setIndex] = useState(0);

不需要像 index.i 这样的糟糕语法，那是一种代码味道。

不要使用静态数字，而是尝试使用项目长度 - 1，因为索引从 0 开始计数，而长度对每个项目进行计数。

if (index < projects.length - 1){setIndex(index + 1 )}