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

问题描述

如何在 useState 数组 React 钩子中推送元素?这是作为反应状态的旧方法吗?或者有什么新东西?

例如setState 推送示例 ?

解决方案

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

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

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

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

有时，如果您仅为某些特定用户事件(例如click，但不是鼠标移动):

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

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

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

const {useState, useCallback} = React;函数示例(){const [theArray, setTheArray] = useState([]);const addEntryClick = () =>{setTheArray(oldArray => [...oldArray, `Entry ${oldArray.length}`]);};返回 [<input type="button" onClick={addEntryClick} value="Add"/>,<div>{theArray.map(entry =><div>{entry}</div>)}

];}ReactDOM.render(<例子/>,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;函数示例(){const [theArray, setTheArray] = useState([]);const addEntryClick = () =>{setTheArray([...theArray, `Entry ${theArray.length}`]);};返回 [<input type="button" onClick={addEntryClick} value="Add"/>,<div>{theArray.map(entry =><div>{entry}</div>)}

];}ReactDOM.render(<例子/>,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>

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

E.g. setState push example ?

解决方案

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]);

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]);

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

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>

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屋！