reactjs - ReactJS中useState Hooks的基础实现示例

Question

我们知道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>

标签： reactjsreact-hooks

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>