React Hooks(useState)中的Push方法? [英] 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推送示例?

推荐答案

使用> c0> ，您可以获取状态项的更新方法:

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(但不像mousemove))更新处理程序中的数组，则无需使用该回调形式就可以了:

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)中的Push方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！