React Hooks（useState）中的推送方法？

Question

如何在 useState 数组 React 钩子中推送元素？

这是反应状态下的旧方法吗？还是新事物？

例如 setState 推送示例？

原文由 Milosh N. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

有时，如果您 只 为某些特定用户事件（例如 click （但不是 mousemove ）更新处理程序中的数组，则无需使用该回调表单即可逃脱）：

 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>

因为那里对 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>

原文由 T.J. Crowder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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

原文由 Elia Ahadi 发布，翻译遵循 CC BY-SA 4.0 许可协议