我如何检测何时到达反应功能组件中的数组末尾？

Question

我有一个简单的组件，其中包含一组动物名称（牛、马、鸡）和一个按钮，单击该按钮会增加数组的索引以显示下一个动物的名称。我想知道一旦我到达数组的末尾，以便我可以重定向用户。我怎样才能做到这一点？

import React, { useState } from 'react'

export default function Test() {

    const [array, setArray] = useState(['cow', 'horse', 'chicken'])
    const [index, setIndex] = useState(0)

    const handleClick = () => {
        setIndex(prevIndex => prevIndex + 1)
    }

    return (
        <div>
            <button onClick={handleClick}>Next animal</button>
            <h2>{array[index]}</h2>
        </div>
    )
}

我曾尝试按照以下几行向回调函数添加条件语句，但没有成功：

const handleClick = () => {
    if(index < array.length){
        setIndex(prevIndex => prevIndex + 1)
    } else {
        alert("We've reached the end of the array, redirect user!")
    }
}

如有任何帮助，我们将不胜感激！

Answer 1

你差了 1。最后一个索引将是 array.length - 1，所以与它进行比较：

const App = () => {
    const [array, setArray] = React.useState(['cow', 'horse', 'chicken'])
    const [index, setIndex] = React.useState(0)

    const handleClick = () => {
        if(index === array.length - 1){
            alert("We've reached the end of the array, redirect user!")
        } else {
            setIndex(index + 1);
        }
    }

    return (
        <div>
            <button onClick={handleClick}>Next animal</button>
            <h2>{array[index]}</h2>
        </div>
    )
};

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Answer 2

只要您点击 handleClick 功能，index 状态就会更新 1。根据 handleClick 函数内应用的条件，每当 index 状态数达到等于数组中存在的元素数时，它将显示警报。

const handleClick = () => {
    setindex(index + 1)
    if (index >= array.length - 1 ) {
        alert("We've reached the end of the array, redirect user!")
    }
}

我如何检测何时到达反应功能组件中的数组末尾？

How do I detect when I've reached the end of an array in a react functional component?

arrays

indexing

reactjs

react-functional-component

use-state