ReactJS中useState Hooks的基础实现示例

问题描述

我们知道 useState 挂钩用于在ReactJs的功能组件中管理状态。

因此，出于学习目的，我实现了useState挂钩的示例（下面提供了代码片段），其中我获取了一个带有一些初始值的数组，并且需要更新该数组并在浏览器中随时显示整个更新后的数组我点击了按钮。我尝试使用以下代码段，但未获得预期的结果。

问题：当我第一次单击按钮时，它将在数组中添加新元素，但是在单击按钮两次或更多次后，它只会覆盖最后一个元素。

预期结果：应该在数组中添加新元素，而不是覆盖数组中的最后一个元素。

在此示例中，我肯定缺少useState挂钩的任何逻辑或任何重要概念。请帮助我了解更多有关React Hooks的信息。

const {useState} = React;

const Example = () => {
    const array = [1,2,3] ;
    const [newArray,setNewArray] = useState(array);
    const [newElement,setElement]= useState(array[array.length-1]);

    const handleBoth = () => {
        setElement(prev => prev + 1);
        setNewArray([...array,newElement]);
    }

    const mapping = newArray.map(element => <li> No. {element}</li>)    

    return (
        <div>
            <ul>
                {mapping}
            </ul>
            <button onClick={handleBoth}>Add</button>
        </div>
    );
};

ReactDOM.render(
  <Example />,document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

解决方法

将状态newArray而不是array用于map实现。 array将在每个渲染器上重新初始化为[1,2,3]。实际上，您应该将array常量移到组件之外

const {useState} = React;
const array = [1,3];

const Example = () => {
    const [newArray,setNewArray] = useState(array);
    const [newElement,setElement]= useState(array[array.length-1]+1);

    const handleBoth = () => {
        setElement(prev => prev + 1);
        setNewArray([...newArray,newElement]);
    }

    const mapping = newArray.map(element => <li> No. {element}</li>)    

    return (
        <div>
            <ul>
                {mapping}
            </ul>
            <button onClick={handleBoth}>Add</button>
        </div>
    );
};

ReactDOM.render(
  <Example />,document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>