React Hooks 中的 Push Method （useState）？

javascript reactjs react-hooks

2022-08-30 00:09:13

如何在 useState array React hook 中推送元素？这是反应状态下的旧方法吗？还是新的东西？

答案 1

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

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

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

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

有时，如果您只为某些特定的用户事件（如（但不是））更新处理程序中的数组，则可以不使用该回调形式即可逃脱：clickmousemove

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>

因为那里的唯一更新是事件中的一个（“离散”事件之一），所以我可以在以下情况下直接更新：theArrayclickaddEntry

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>

答案 2

为了进一步扩展，这里有一些常见的例子。开头为：

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

数组末尾的推送元素

setTheArray(prevArray => [...prevArray, newValue])

对象末尾的推送/更新元素

setTheObject(prevState => ({ ...prevState, currentOrNewKey: newValue}));

推送/更新对象数组末尾的元素

setTheArray(prevState => [...prevState, {currentOrNewKey: newValue}]);

数组对象末尾的推送元素

let specificArrayInObject = theObject.array.slice();
specificArrayInObject.push(newValue);
const newObj = { ...theObject, [event.target.name]: specificArrayInObject };
theObject(newObj);

这里还有一些工作示例。https://codesandbox.io/s/reacthooks-push-r991u