react hook怎么创建数组往数组里动态添加元素
时间: 2023-09-21 22:08:33
浏览: 116
要在 React Hook 中创建一个数组并[动态](https://geek.csdn.net/educolumn/08aef4ab97997f5b9ed71860c44e8258?spm=1055.2569.3001.10083)向其中添加元素,可以使用 useState Hook 来创建数组状态,然后使用 spread operator(展开运算符)来添加新元素。以下是一个示例:
import React, { useState } from 'react';
function MyComponent() {
const [myArray, setMyArray] = useState([]);
function [han](https://geek.csdn.net/educolumn/0d22b54eaf6bcf967d9625e1679d00b4?spm=1055.2569.3001.10083)dleClick() {
setMyArray([...myArray, 'new element']);
return (
{myArray.map((item, index) => (
<div key={index}>{item}</div>
<button onClick={[han](https://geek.csdn.net/educolumn/0d22b54eaf6bcf967d9625e1679d00b4?spm=1055.2569.3001.10083)dleClick}>Add Element</button>
在这个示例中,我们使用 useState Hook 来创建一个名为 myArray 的数组状态。然后,在 handleClick [函数](https://geek.csdn.net/educolumn/ba94496e6cfa8630df5d047358ad9719?dp_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6NDQ0MDg2MiwiZXhwIjoxNzA3MzcxOTM4LCJpYXQiOjE3MDY3NjcxMzgsInVzZXJuYW1lIjoid2VpeGluXzY4NjQ1NjQ1In0.RrTYEnMNYPC7AQdoij4SBb0kKEgHoyvF-bZOG2eGQvc&spm=1055.2569.3001.10083)中,我们使用 spread operator 将一个新元素添加到 myArray 中。最后,我们在组件中渲染 myArray 中的每个元素,并添加一个按钮,当点击时,调用 handleClick [函数](https://geek.csdn.net/educolumn/ba94496e6cfa8630df5d047358ad9719?dp_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6NDQ0MDg2MiwiZXhwIjoxNzA3MzcxOTM4LCJpYXQiOjE3MDY3NjcxMzgsInVzZXJuYW1lIjoid2VpeGluXzY4NjQ1NjQ1In0.RrTYEnMNYPC7AQdoij4SBb0kKEgHoyvF-bZOG2eGQvc&spm=1055.2569.3001.10083)来添加新元素。
相关问题
react hook 动态渲染数据
使用React Hook动态渲染数据非常简单。在函数组件中,我们可以使用useState来创建状态变量,并且可以使用useEffect来监听状态变化并执行相应的操作。
首先,我们需要在组件中定义一个状态变量,可以使用useState来创建一个初始值为空的数组。例如:
```jsx
const [data, setData] = useState([]);
```