javascript - React Hooks 中的 Push 方法(useState)？

Question

如何将元素推送到 useState 数组 React 钩子(Hook)中？这是 react 状态下的旧方法吗？还是一些新的东西？

例如setState push example ？

Answer 1

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

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

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

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

有时，如果您仅为某些特定的用户事件(如click)更新处理程序中的数组(但不像鼠标移动):

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

React 确保刷新渲染的事件是列出的“离散事件”here .

实例(将回调传递给 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>