ReactJS中useState Hooks的基础实现示例

Question

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

因此，出于学习目的，我正在实现 useState 钩子的示例（下面给出了 sn-p），其中我采用了一个具有一些初始值的数组，我需要更新数组并在每当我点击按钮时浏览器。我尝试了下面的 sn-p 但没有得到预期的结果。

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

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

在这个例子中，我肯定错过了 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>

Answer 1

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

const {useState} = React;
const array = [1,2,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>