在React中更新对象数组值的最佳方法是什么
在React中更新对象数组值的最佳方法是使用不可变性原则。React鼓励使用不可变性来管理组件的状态，以提高性能和可维护性。
下面是更新对象数组值的最佳方法：
- 使用数组的map方法创建一个新的数组，遍历原始数组中的每个对象。
- 对于需要更新的对象，创建一个新的对象，将需要更新的属性设置为新的值。
- 将新的对象替换原始数组中的对应对象。
- 返回新的数组。
以下是一个示例代码：
const updateObjectInArray = (array, index, newValue) => {
return array.map((item, i) => {
if (i !== index) {
return item;
}
return {
...item,
value: newValue
};
});
};
// 使用示例
const originalArray = [
{ id: 1, value: 'old value' },
{ id: 2, value: 'old value' },
{ id: 3, value: 'old value' }
];
const updatedArray = updateObjectInArray(originalArray, 1, 'new value');
console.log(updatedArray);在上面的示例中，我们定义了一个updateObjectInArray函数，它接受一个数组、要更新的对象的索引和新的值作为参数。函数使用map方法遍历原始数组，并根据索引判断是否需要更新对象。如果需要更新，我们创建一个新的对象，并将需要更新的属性设置为新的值。最后，我们返回新的数组。
这种方法确保了原始数组的不可变性，因为我们创建了一个新的数组，并且只更新了需要更新的对象。这样可以避免直接修改原始数组，从而遵循React的不可变性原则。
推荐的腾讯云相关产品：无
希望以上回答对您有帮助！
相关·内容
3回答
如何防止我的数组在React JS的onChange函数上一次又一次地更新？
javascript、reactjs
我已经克隆了一个数组，并且我有一个onChange函数。在调用onChange函数时，我的原始数组和克隆数组将根据更新后的onChange值进行更新。但我不想更新我的克隆阵列。我该怎么做呢？
我的代码是-
const clonedArray = [...originalArray];
const onChange = (id:number, value: string): void => {
const arrayData = originalArray;
const selectedData = arrayData.find(
(data)
浏览 2提问于2021-09-17得票数 3
1回答
如何在React中正确呈现状态？
javascript、reactjs
我有一个react组件，我使用useState创建如下值
const [value, setValue] = useState([
{ id: 0, name: "rafi" },
{ id: 1, name: "fii" },
]);
我在react组件中创建了一个函数来重命名数组和删除数组
function arrayObjectIndexOf(myArray, searchTerm, property) {
for (var i = 0, len = myArray.length; i < len; i++) {
浏览 22提问于2021-05-14得票数 0
回答已采纳
2回答
使用扩展语法修改状态时出现的问题
javascript
我正在开发一个react应用程序，我遇到了以下问题。我想根据从action creator传递的参数来修改reducer中的状态对象。为了简单起见，我用纯JS做了一个例子 状态对象看起来像这样 const stateObj = {
left: {
data: [{ name: 'Adam', surname: "Test Adam" }]
},
right: {
data: [{ name: 'Tom', surname: 'Test Tom' }]
},
} 从操作创建者传递到reduc
浏览 18提问于2021-03-19得票数 0
回答已采纳
3回答
如何找到我想编辑的联系人的id？
javascript、reactjs
我有一个数组的联系人，需要找到他们的id，以便我可以编辑一个具体的联系人。我似乎找不到联系人的身份证。
const index = contactsEditedUpdated.findIndex(el => el.id === find);
这是不起作用的线路。我想把el.id分配给idContact。
const editContact = (contactObj, find) => {
fetch("http://localhost:4000/data", {
contactObj,
method: "POST",
浏览 0提问于2019-08-27得票数 2
回答已采纳
4回答
将一个对象附加到数组中，为什么“推送”不能工作？
reactjs、react-hooks
我只想了解为什么第33行不工作(标记出来)，但是第32行工作。为什么我不能简单地将一个对象推送到数组中？这两行(第32行和第33行)不应该做完全相同的事情吗？
参考：
import React, { useState } from "react";
function ThingsToDo({ thing }) {
return <div>{thing.text}</div>;
}
function ToDoForm({ add }) {
const [value, setValue] = useState("");
c
浏览 4提问于2020-11-09得票数 1
回答已采纳
1回答
我无法在ListItem组件中更改开关的状态
javascript、react-native、react-native-elements
我要做的是在这个组件中列出一个包含多个项的数组，这个数组包含每个单独项的布尔状态，如下所示。
items : {
"ISA InterChile" : [
{
key : '7843',
name : "ISA APP RRHH",
fav: false
},
{
key : '7844',
name : "Garantia y Obligaciones",
fav:
浏览 11提问于2020-05-15得票数 0
回答已采纳
2回答
我正在尝试使用React钩子更新状态？？创建、读取和删除部分已经完成，但iam无法更新
javascript、reactjs、react-hooks
我正在制作一个使用useState react钩子的To应用程序。我已经完成与创建，读和删除部分，但我没有能够更新的状态。有人能帮帮我吗。我已经完成了同样的类组件。
/******************************我的app.js文件*
import React, { useState } from "react";
import "./App.css";
import ToDoList from "./Components/ToDoList";
function App() {
const [change, handleCh
浏览 3提问于2020-06-05得票数 0
回答已采纳
3回答
Javascript:切片后重复数组不正确，并追加keyValue
javascript、arrays
我很难弄清楚为什么persons数组包含新的age键:value对。
我想，通过切片(并因此创建一个独立的副本)，我可以只在newArray上工作，并且只将age附加到它.但它似乎也在更新persons？
提前感谢
const persons = [
{ first: 'Albert', last: 'Einstein', birthYear: 1879, deathYear: 1955 },
{ first: 'Isaac', last: 'Newton', birthYear: 1643, deathYear: 1
浏览 5提问于2017-01-06得票数 1
回答已采纳
1回答
反应: Checkboxlist、SelectAll和ClearAll按钮不能工作
javascript、reactjs
我在复选框列表中显示数据。我已经实现了选择全部或取消选中所有复选框的Select和ClearAll按钮。
请在沙箱中找到我的反应码：
请修正我的代码为什么SelectAll和ClearAll功能不能工作。
import React from "react";
const data = [
{ templateID: "11", templateName: "All" },
{ templateID: "21", templateName: "SC" }
];
export class Delete_Item
浏览 3提问于2022-10-28得票数 0
1回答
使用http路径设置活动选项卡
javascript、reactjs、material-ui、react-material
我有一个垂直选项卡的例子：
import * as React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
interface TabPanelProps {
children?: React.Reac
浏览 7提问于2021-09-21得票数 1
3回答
如何使用react钩子中的useState添加/更新数组部门
javascript、reactjs、typescript、react-hooks
我有一个问题，我正在尝试在选择一个项目后添加/更新数据对象。
代码如下：
const [roomDept, setDept] = useState([{ code: null, dept: null }]);
const [department, setDepartment] = useState([]);
const appendRoomDpt = () => {
setRoomDept(array => [...array, { code: null, dept: null }]);
}
return (
<div>
<ButtonGroup
浏览 1提问于2021-09-30得票数 0
1回答
如何只呈现子级而不呈现所有高级组件
javascript、reactjs、performance、react-hooks、react-memo
我有一个子组件，它在父组件的循环中。当其中一个子组件正在更新父组件的状态时，它将重新呈现所有子组件，因为它是循环的。如何避免每次迭代的重呈现。它应该更新那个特殊的子代。
import React, { useState } from "react";
function Parent() {
const [selectedChild, setSelectedChild] = useState([]);
const onChangeHandle = (event, id) => {
const checked = event.target.checked;
浏览 2提问于2021-02-04得票数 1
4回答
从未知深度多维创建一个新数组，并保持相同的结构。
php、arrays、multidimensional-array
我有一个多维数组，可以有任何深度。我试图做的是基于动态键过滤整个路径，并创建一个新的路径数组。
数组的示例
$originalArray = [
"title" => "BACKPACK MULTICOLOUR",
"description" => "description here",
"images" => [
[
"id" => 12323123123,
"width"
浏览 21提问于2022-05-15得票数 1
回答已采纳
2回答
在将以前的状态设置为新状态时，不响应注册状态更改
javascript、reactjs
我有以下代码:-
const [dice, setDice] = React.useState(allNewDice()) // Array of objects with the following properties: `value` (random digit between 1 and 6), `id` (unique id), `isHeld` (boolean)
function holdDice(id) {
const heldDie = dice.findIndex(die => die.id === id)
setDice(prevDic
浏览 7提问于2022-05-23得票数 0
回答已采纳
3回答
使用扩展运算符更新数组对象值
javascript、reactjs
我正在尝试从数组对象和对象更新一个值。我的示例代码如下。没有得到我所期望的结果。如果有人能帮上忙就好了？ let array = [
{
id:"01",
"name": {
"value": "jaison",
"error": null
},
"email": {
"
浏览 68提问于2019-05-13得票数 1
回答已采纳
2回答
如何从另一个对象数组更新对象数组？
angular、typescript
我有两个对象数组。一个是主数组，另一个是临时数组。我需要比较主数组和临时数组，并在匹配id的基础上，从temp数组更新主数组中的值。
例如，id 2&3在两个数组中都是匹配的。因此，我需要从temp数组更新主数组中的值。
// Main array
this.MyArray = [
{ id: "0", value: "Car" },
{ id: "1", value: "Bike" },
{ id: "2", value: "Train" },
{ id:
浏览 2提问于2022-10-21得票数 0
回答已采纳
2回答
更新react中的对象状态数组
javascript、reactjs
下面的代码片段来自我的组件，在这里，我根据状态中的对象生成输入字段。
我可以成功地生成输入字段，但一直收到错误消息：
TypeError:无法读取未定义的属性“映射”
每当我在输入字段中键入时，指向arrayObjToArrary in Utils.js方法。
我如何更新这里的值?？
Main.js
import Input from "../UI/Input";
import {arrayObjToArrary} from "../../utility/Utils.js";
const [profiles, setProfiles] = useS
浏览 4提问于2020-06-25得票数 0
3回答
使用现有数组中的唯一连接值从现有数组创建新数组
javascript、arrays
有人知道我如何从现有数组中创建一个具有现有数组唯一连接值的新数组吗？
const originalArray = [
[
{ value: 'red', id: 99 },
{ value: 'blue', id: 100 },
],
[
{ value: 'small', id: 101 },
{ value: 'medium', id: 102 },
],
[
{ value: 'modern', id: 103 },
{ value:
浏览 5提问于2022-08-12得票数 2
2回答
从Array /不正确的数组长度输出中删除项
arrays、reactjs、redux
我在Redux中有一个操作，它可以删除3个条目的硬编码数组中的最后一个项。
它工作得很好，但是我有第二个属性(dataLength)来计算数组的长度。在分派操作时，我希望从数组中移除最后一项，同时同时更新数组长度。
正在发生的事情是，项目被移除数组，但长度(dataLength)直到我再次分派操作时才会更新。
所以我有两个问题：
我的dataLength属性设置为null，是否可以在初始状态下获取数组的长度？
如何在第一次分派之后立即正确地更新dataLength？
谢谢
减速器
const initialState = {
data: [
{
浏览 0提问于2018-10-15得票数 0
回答已采纳
1回答
响应钩子更新对象数组
javascript、object-oriented、array、react.js、react-native
我声明了一个react钩子，它将包含一个对象数组，如下所示：
const [rowDataTracker, setRowDataTracker] = useState([]);
现在，我需要更新钩子，基本上创建一个有效负载，如下所示：
[
{id: 100, payload: {field1: "value", field2: "value"}},
{id: 105, payload: {field1: "value", field3: "value"}},
{id: 109, payload: {field4: &
浏览 0提问于2020-09-15得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
