React Hooks（useState）中的Push方法？

  • Z时代
  • 2024-01-10
  • 分类：问答

如何在useState数组React挂钩中推送元素？那是反应状态下的一种旧方法吗？还是新东西？

回答：

使用时useState，可以获得状态项的更新方法：

const [theArray, setTheArray] = useState(initialArray);

然后，当您要添加新元素时，可以使用该函数并传入新数组或将创建新数组的函数。通常情况下是后者，因为状态更新是异步的，有时是分批的：

setTheArray(oldArray => [...oldArray, newElement]);

有时，如果您 针对某些特定的用户事件click（例如，但不喜欢mousemove）更新处理程序中的数组，则无需使用回调形式就可以摆脱困境：

setTheArray([...theArray, newElement]);

React保证刷新渲染的事件是此处列出的“离散事件” 。

实时示例（将回调传递给setTheArray）：

const {useState, useCallback} = React;
function Example() {
    const [theArray, setTheArray] = useState([]);
    const addEntryClick = () => {
        setTheArray(oldArray => [...oldArray, `Entry ${oldArray.length}`]);
    };
    return [
        <input type="button" onClick={addEntryClick} value="Add" />,
        <div>{theArray.map(entry =>
          <div>{entry}</div>
        )}
        </div>
    ];
}
ReactDOM.render(
    <Example />,
    document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

因为唯一的更新theArray是click事件中的一个（“离散”事件之一），所以我可以通过直接更新来解决addEntry：

const {useState, useCallback} = React;
function Example() {
    const [theArray, setTheArray] = useState([]);
    const addEntryClick = () => {
        setTheArray([...theArray, `Entry ${theArray.length}`]);
    };
    return [
        <input type="button" onClick={addEntryClick} value="Add" />,
        <div>{theArray.map(entry =>
          <div>{entry}</div>
        )}
        </div>
    ];
}
ReactDOM.render(
    <Example />,
    document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

以上是 React Hooks（useState）中的Push方法？ 的全部内容， 来源链接： utcz.com/qa/436116.html

回到顶部