React Hooks(useState)中的推送方法? [英] Push method in React Hooks (useState)?

问题描述

如何在 useState 数组 React 钩子中推送元素?这是反应状态下的旧方法吗?还是新的东西?

How to push element inside useState array React hook? Is that as an old method in react state? Or something new?

例如setState 推送示例 ?

推荐答案

当你使用 useState，可以获取状态项的更新方法:

When you use useState, you can get an update method for the state item:

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

然后，当您想添加一个新元素时，您可以使用该函数并传入新数组或将创建新数组的函数.通常是后者，因为状态更新是异步的，有时是批处理的:

then, when you want to add a new element, you use that function and pass in the new array or a function that will create the new array. Normally the latter, since state updates are asynchronous and sometimes batched:

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

如果您仅为某些特定的用户事件(如 click(但不像 鼠标移动):

Sometimes you can get away without using that callback form, if you only update the array in handlers for certain specific user events like click (but not like mousemove):

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

React 确保刷新渲染的事件是离散事件".此处列出.

The events for which React ensures that rendering is flushed are the "discrete events" listed here.

实时示例(将回调传递给 setTheArray):

Live Example (passing a callback into 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 中更新:

Because the only update to theArray in there is the one in a click event (one of the "discrete" events), I could get away with a direct update in 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)中的推送方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！