react如何在数组中手动添加一个对象

简介: react如何在数组中手动添加一个对象

使用useState钩子创建了一个名为objectArray的状态和一个名为setObjectArray的更新函数。初始时,objectArray为空数组。


在handleAddObject函数中,创建一个新的对象并赋值给newObject变量。然后,在调用setObjectArray更新函数时,使用展开运算符将新对象添加到原有数组中,从而生成一个新的包含新对象的数组。


最后,在组件的返回部分,渲染了一个按钮,并将handleAddObject函数绑定到该按钮的点击事件。当用户点击按钮时,会触发handleAddObject函数,从而将新对象添加到objectArray数组中。

import React, { useState } from 'react';
const YourComponent = () => {
  const [objectArray, setObjectArray] = useState([]);
  const handleAddObject = () => {
    const newObject = { name: 'John', age: 25 };
    setObjectArray(prevArray => [...prevArray, newObject]);
  };
  return (
    <div>
      <button onClick={handleAddObject}>添加对象</button>
      <ul>
        {objectArray.map((obj, index) => (
          <li key={index}>{obj.name} - {obj.age}</li>
        ))}
      </ul>
    </div>
  );
}
export default YourComponent;
相关文章
|
4月前
|
JSON JavaScript 前端开发
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
94 0
|
5月前
|
前端开发 JavaScript
react 数组下标来作为 react组件中的key
react 数组下标来作为 react组件中的key
60 0
|
4月前
|
前端开发 JavaScript
react中的useState为什么是一个数组,而不是一个对象?
react中的useState为什么是一个数组,而不是一个对象?
39 0
|
8月前
|
前端开发
react对数组进行展开显示
react对数组进行展开显示
55 0
|
8月前
|
前端开发 数据处理
react的对象属性替换处理
react的对象属性替换处理
62 0
|
8月前
|
前端开发 数据处理
react中filter数组的使用
react中filter数组的使用
40 0
|
8月前
|
前端开发
前端学习笔记202307学习笔记第五十七天-react源码-创建fiberroot对象和rootFiber对象1
前端学习笔记202307学习笔记第五十七天-react源码-创建fiberroot对象和rootFiber对象1
36 0
|
8月前
|
前端开发
前端学习笔记202307学习笔记第五十七天-react源码-创建fiberroot对象和rootFiber对象3
前端学习笔记202307学习笔记第五十七天-react源码-创建fiberroot对象和rootFiber对象3
30 0
|
8月前
|
前端开发
前端学习笔记202307学习笔记第五十七天-react源码-创建fiberroot对象和rootFiber对象2
前端学习笔记202307学习笔记第五十七天-react源码-创建fiberroot对象和rootFiber对象2
36 0
|
8月前
|
前端开发
前端学习笔记202307学习笔记第六十天-react源码-子级节点Fiber对象的构建流程
前端学习笔记202307学习笔记第六十天-react源码-子级节点Fiber对象的构建流程
47 0
前端学习笔记202307学习笔记第六十天-react源码-子级节点Fiber对象的构建流程