如何使用计数器初始化状态

Question

我试图在 React 中显示一些保存在 data.js 文件中的字符。 第一个单独显示。 问题是，当我单击我放置的数组时，计数器应该增加并显示下一个字符。

例如，这工作，newCounter 从 0 增加到无限：

let counter = 0
const [character, setCharacter] = useState(data[0])
function nextCharacter() {
let newCounter = data[counter ++]
console.log(newCounter)  
}

但是当我尝试使用新值启动状态时，newCounter的值不会增加。它仅从 1 到 2。

let counter = 0
const [character, setCharacter] = useState(data[0])
function nextCharacter() {
let newCounter = data[counter ++]
console.log(newCounter)  
setCharacter(newCounter)
}```

Answer 1

这很明显，因为当函数nextCharacter被调用时，它会调用setCharacter，这基本上会更新状态数据，从而导致组件重新渲染，当组件重新渲染时，计数器的值再次重置为 0。为了克服这个问题，您可以定义计数器的状态，并在计数器的值更改时使用useEffect钩子更新字符，如下所示：

const [character, setCharacter] = useState(data[0])
const [counter, setCounter] = useState(0)
useEffect(() => {
setCharacter(data[counter])
}, [counter])
function nextCharacter() {
setCounter(counter+1)
// let newCounter = data[counter ++]
// console.log(newCounter)  
// setCharacter(newCounter)
}

而且你甚至不需要将状态用于character，因为你总是可以使用数据数组和当前计数器值来获取它。我保留该部分，供您删除。