React将对象数组替换为相同类型的新对象数组
React是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，通过构建可复用的UI组件来构建用户界面。在React中，可以使用状态（state）来存储和管理数据。
当需要将对象数组替换为相同类型的新对象数组时，可以使用React提供的方法来实现。以下是一种可能的实现方式：
- 首先，创建一个新的空数组，用于存储新的对象数组。
- 遍历原始的对象数组，对每个对象进行处理。
- 对于每个对象，可以使用ES6的展开运算符（spread operator）来创建一个新的对象，并将原始对象的属性复制到新对象中。
- 如果需要对属性进行修改或添加新的属性，可以在创建新对象时进行相应的操作。
- 将新对象添加到新的数组中。
- 最后，将新的数组作为新的状态（state）来更新React组件。
这样，原始的对象数组就被替换为相同类型的新对象数组。
React的优势在于其高效的虚拟DOM（Virtual DOM）机制，可以减少对实际DOM的操作次数，提高性能。它还提供了丰富的生命周期方法和钩子，方便开发者进行组件的初始化、更新和销毁等操作。此外，React还具有良好的可扩展性和社区支持，有大量的第三方库和工具可供选择。
React在前端开发中广泛应用，特别适合构建单页面应用（SPA）和复杂的用户界面。它可以与其他前端框架和库（如Redux、React Router等）配合使用，提供更强大的功能和更好的开发体验。
腾讯云提供了一系列与React相关的产品和服务，包括云服务器、云数据库、云存储、云函数等。具体推荐的产品和产品介绍链接地址可以根据实际需求和场景进行选择。
相关·内容
我正在尝试通过addTask方法在tasks数组中添加一个任务对象，该方法获取之前的状态并添加新任务，它适用于JSX，但不适用于我使用TypeScript的情况。我得到的错误是 Type 'ITask[] | undefined' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators. TS2569 import React, { Fragment } from 'react&#
浏览 26提问于2020-04-14得票数 2
回答已采纳
我正在使用React来呈现HTML内容。问题是，我无法理解代码的特定部分，它是做什么的。
如果您可以从下面的链接中看到Todo列表的基本示例
<script type='text/jsx'>
/** @jsx React.DOM */
var TodoList = React.createClass({
render: function(){
var createItem = function(itemText) {
浏览 6提问于2015-03-05得票数 22
回答已采纳
我是react的新手，我想将一个对象数组分配给一个React.FC状态。我的api逻辑如下所示： class LandApi {
async getLands(): Promise<Land[]> {
const response = await fetch('http://localhost:8080/api/lands', {
method: 'GET',
headers: { 'Content-Type': 'application/json'
浏览 19提问于2020-07-24得票数 2
回答已采纳
3回答
我正在用react/react编写代码，试图执行以下操作。
从父组件获取对象数组作为支柱，使用useState钩子将其设置为状态。根据预期的筛选器(时间和等级)对状态进行排序，并重新呈现子组件.我看到的是，下面的代码在排序后更新状态，但是即使状态被更新，依赖于状态的子组件也不会重新呈现。我以为只要状态改变，子组件就会自动重新呈现？
import React, {useState} from 'react';
import ProfilePostspreview from './ProfilePostspreview';
function ProfileNavi
浏览 2提问于2020-03-15得票数 0
回答已采纳
2回答
我有一个React + Redux应用程序，它使用Immutability.js。在我的还原器中，我将状态定义为不可变列表。
const initialSuggestedResponseState = Immutable.List([]);
每次发生特定的操作时，我都想用一个新的列表来替换这个列表。我想我错过了Immutability.js的一些东西，因为我还没有找到一个可行的解决方案。到目前为止，我已经尝试过这样的方法：
state.clear();
action.messages.forEach(message => {
let
浏览 3提问于2016-11-21得票数 2
回答已采纳
1回答
所以，在我的reducer中有一些代码看起来像这样之前，我的组件没有重新渲染，即使列表被正确地映射到React属性(通过mapStateToProps)：
case "ADDTOLIST":
let stateCopy = Object.assign({}, state);
let listsCopy = stateCopy.lists;
listsCopy.push(action.item);
return {...state, lists: listsCopy};
然后，我更改了设置listsCopy的代码行--所以我使用slice创建了
浏览 1提问于2017-05-10得票数 0
我正在接收OrderContent组件中的道具上的一些产品以使用它们在选择组件中，当我在选择它渲染摘要和产品组件中选择产品时，在这些组件中我可以选择数量，用它我可以计算总数所有回到OrderContent组件，问题是当我试图使用输入类型(在产品组件上)的OnChange时，useEffect (内部是计算总状态的函数)不会触发，但如果我从状态添加产品或删除它，它就会触发。
import React, { Fragment, useState, useEffect } from "react";
import Select from "react-select";
浏览 32提问于2020-02-13得票数 0
回答已采纳
我有以下反应成分。我是比较新的反应，所以没有所有的概念，使用钩子牢牢地掌握在我的掌握。
我还看到了一些其他问题，指出了setState函数的异步特性，但这里似乎不是这个问题。
期望代码：我希望当用户输入fName和lName输入值时，h1会自动更新和呈现
实际发生的事情：当我在输入中输入值时，类型化值不会显示在UI上的输入字段中。标题(h1)也不更新。
附加注释：如果我使用" if“语句检查并有条件地更新对象的相应属性，而不是在setHeadingText中使用prevStatename = value；，代码将按预期工作。
import React, {useState} fro
浏览 5提问于2021-08-09得票数 0
回答已采纳
当我使用react钩子更改数组中对象的属性时，组件不会重新呈现。
我咨询了我的首席技术人员，他解释说React搜索“广度”而不是“深度”，意思是React可以看到对象，但它不能看到对象属性的变化。
const [array, setArray] = useState([
{'id': 0, text: '0'},
{'id': 1, text: '1'},
{'id': 2, text: '2'}
]);
我希望当状态改变时，组件会重新呈现，但
浏览 63提问于2019-08-01得票数 6
回答已采纳
我想从给定的API(链接在代码示例中被审查)获取React中的数据。获取数据的工作方式是香草javascript。但我需要做同样的反应，但我会犯这些错误。
第一个错误-未命名的TypeError: products.map不是一个函数。第二个错误-上述错误发生在组件中：
控制台响应屏幕截图
反应代码(不起作用)
import { useState, useEffect } from "react";
import axios from "axios";
function DataFetching() {
const [products, setPro
浏览 4提问于2022-07-13得票数 -2
我有一个react组件，它呈现一个封面列表和一个从list onClick中删除图书的按钮。我是在通过地图发送到道具删除操作和书架信息通过地图状态到道具。删除操作正在成功地从数据库中删除图书，并且正在击中我的还原器。但是即使状态更新，图书列表组件也不会重新呈现(除非我重新加载，否则删除的书不会消失)。
import React from 'react';
import { Link, withRouter } from 'react-router-dom';
import {CarouselProvider, Slider, Slide, ButtonBac
浏览 2提问于2017-10-21得票数 1
1回答
伙计们希望有人能帮我解决一个问题。我构建了一个函数，该函数从后端获取用户的帖子并作为响应返回：
const [posts, setPosts] = useState([]);
const newsFeed = async () => {
await axios
.post(`${process.env.REACT_APP_API}/news-feed`)
.then((res) => {
setPosts(res.data);
})
.catch((err) => {
console.log(err);
});
};
该函数由useEff
浏览 8提问于2022-03-16得票数 0
2回答
可能重复：
为什么是
object h = new byte();
可能和
object[] h = new byte[5];
不是吗？
如何将字节数组转换为对象数组？
谢谢!
浏览 3提问于2012-11-07得票数 3
回答已采纳
我试图将我的反应状态组织成由数组组成的对象文本。
const [state, setState] = React.useState({ filter: [], other: [] });
每当单击列表项时，我希望更新筛选器数组。
const handleListItemClick = (event, index) => {
if (state['filter'].includes(index)) {
setState(state['filter'].filter(function (element) {
浏览 2提问于2021-07-05得票数 0
回答已采纳
2回答
int[] myArray = {1, 2, 3, 4, 5};
Console.WriteLine(myArray[0]);
int[] localArray = (int[])myArray.Clone();
localArray[0] = 10;
Console.WriteLine(myArray[0]);
Console.WriteLine(localArray[0]);
其产出如下：
1
1
10
就我的理解而言，myArray和localArray都应该指向同一个整数，如果我将localArray更改为10，它也应该反映myArray。但正如输出所示，它们都
浏览 4提问于2022-05-23得票数 0
回答已采纳
我有以下代码:-
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
回答已采纳
1回答
我正在学习react native中的typescript。 如果我输入以下代码作为vanilla javascript，这个应用程序运行得很好。但是作为一个打字输入，我收到了一条消息circleStyles.push(styles.circleCorrect); is a error。我知道这看起来像是类型的问题，但我不知道如何解决它。 有谁有主意吗？ import React from "react";
import { View, StyleSheet, Dimensions, Image } from "react-native";
const sc
浏览 19提问于2019-11-19得票数 0
回答已采纳
我正在创建一个带有ts/react/redux的前端应用程序。我对打字语言很熟悉，但似乎还不够。
情境:有react组件(这里我们不关心JSX )：
import React from 'react';
import './MathComponent.css';
interface MathData {
mathExpectation: number,
variance: number,
standardDeviation: number,
}
interface Props {
data: MathData,
}
export
浏览 1提问于2021-08-11得票数 1
回答已采纳
1回答
我很困惑我的代码会发生什么。我编写的工具，接受上传的CSV文件，并分析一些以获得一些数据。为了使我的用户具有init状态，我全局声明了带有默认值的emptyUser。
当我运行我的脚本并上传一个文件时，emptyUser会被更新为数据，这是不应该发生的。当我不处理任何数据，而是立即输出emptyUser时，对象就会如预期的那样为空。
第二件事是，所有用户在终端都有相同的数据，这也是与emptyUser中相同的数据。
有人能向我解释一下，即使我从来不改变对象的内容，为什么对象也会被填充，为什么所有的用户都有相同的内容？
import React from "react";
imp
浏览 2提问于2022-04-07得票数 0
回答已采纳
1回答
实例化泛型类的JAVA数组
、、、、
E[] arr = (E[])new Object[INITIAL_ARRAY_LENGTH];
上面的代码摘自下面的文章：
其中E是泛型类类型。当我们使用type Object实例化数组时，编译器/JVM如何知道需要分配多少内存。我的理解是，类型转换只允许更改引用类型，而不允许更改底层对象结构。
浏览 3提问于2014-09-20得票数 2
回答已采纳
1回答
我有一个react-redux应用程序，并且当子组件的位置在状态改变时使用react-transition-group进行转换。但是，如果我的redux状态对象的顺序改变，组件将卸载，然后重新安装，而不是更新。这会阻止零部件平滑过渡到其新位置。有没有办法在不引入新状态的情况下解决这个问题？ 我的父组件如下所示： class ParentComponent extends Component {
...
render() {
return (
<div>
<div>
<CSSTransitionGroup>
浏览 11提问于2019-07-04得票数 0
我试着做一个简单的游戏，像紫色对紫色宫殿游戏使用反应。我有一个名为clickBtn的方法，它应该在单击和第二次单击时增加计数，但我不知道为什么handleClick方法要更改状态的chosen和clicked属性，即使新状态的副本是不使用setState方法的。你能帮我修一下吗？
class GameBoard extends React.Component {
constructor() {
super();
this.state = {
score: 0,
time: 0,
list: [...generateObList(), ..
浏览 4提问于2020-11-11得票数 0
回答已采纳
2回答
我正在构建反动Todo应用程序。但是，我不明白todos类型是如何变成对象的？在App.js中，我们为它设置了一个数组。在我们设置的Form.js中
setTodos([...todos, { text: inputText, id: Math.random() * 1000 }]);，我不明白这一行是怎么回事。你能帮忙吗？
App.js
import React, { useState } from "react";
import "./App.css";
//Importing Components
import Form from "./compo
浏览 6提问于2021-05-22得票数 1
回答已采纳
1回答
我正在尝试使用react和node从客户端的服务器下载文件。这是我用来在前端实现下载btn的代码： import React from "react";
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
class DownloadBtn extends React.Component {
constructor(props) {
super(props);
this.state ={
浏览 93提问于2021-06-16得票数 0
回答已采纳
1回答
问题的描述
我试图显示与我的上下文不同的任务。每次提交表单时，我都希望在另一个任务下出现一个新任务，而不是在表单提交之后，旧任务被新任务替换。我相信这是一个平庸的问题，但这是我的第一个反应项目。另外，我使用的是样式的组件，因此为了可读性，我将css排除在代码块之外。
上下文
import { createContext, useState } from "react";
export const TaskContext = createContext();
export const TaskProvider = ({ children }) => {
cons
浏览 3提问于2021-06-09得票数 0
回答已采纳
2回答
我有两个对象数组。从A[]到object[]的协方差隐式地传递给一个人，然后没有问题地显式地抛回。另一个是一个对象列表，我将A添加到其中，然后生成一个object[]，然后尝试将其转换为A[]。
public class A {}
object[] o = new A[]{new A(), new A()};
A[] a_2 = (A[])o;
List<object> lo = new List<object>();
lo.Add(new A());
lo.Add(new A());
A[] a_1 = (A[])lo.ToArray();
第二个测试在Syste
浏览 0提问于2015-03-06得票数 0
回答已采纳
2回答
我正在尝试访问TypeScript中的一个日期数组，这在正常的JavaScript中运行得很好，但现在我遇到了以下错误：
Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'Date'. Property '0' does not exist on type 'Date'.ts(7053)
因此，在React中，我使用react-calendar获取开始日期和结束日期
浏览 6提问于2022-02-01得票数 -1
1回答
让你知道我在WordPress工作。我有一个数组，并希望从该数组中创建一个只具有特定值的对象。
然后我有另一个单独的数组，我想添加到这个新对象中。我可能把事情复杂化了。如果我是，请告诉我。
到目前为止，我的情况如下：
$custom = get_post_custom(); //Gets array of values
$picObject = (object)$custom; //Creates object
$picCount = $custom['picturecount'][0];
for ($x = 1; $x <= $picCount; $x++) {
浏览 2提问于2017-04-20得票数 0
回答已采纳
我有一个React / Redux应用程序，可以渲染PureComponents网格。我希望组件只在属性值改变时才重新渲染，但实际上所有组件都会在要存储的任何更新时重新渲染。该问题似乎是由数组属性引起的。 我已经在this sandbox中重现了这个问题。在这个最小的示例中，将呈现Cell组件的两个实例。每一个都显示一个单独记录在存储中的值，并且可以通过一个按钮分别递增或递减。 Cell.js import React, { PureComponent } from "react";
import { connect } from "react-redux";
浏览 7提问于2020-01-08得票数 1
回答已采纳
2回答
在使用for循环(res2.data.list)迭代JSON数组时遇到问题，获取三个数据点，并将它们放入一个新数组中。获取错误“预测不是fetchWeather的构造函数”。我将如何在功能组件中做到这一点？
const fetchWeather = async () => {
try {
await window.navigator.geolocation.getCurrentPosition(
savePositionToState
);
const res = await axios
浏览 2提问于2021-09-08得票数 1
回答已采纳
我震惊地注意到，以下代码在我的机器上正常工作，即按照正确的顺序构造和销毁二维数组的所有25个对象。
#include <iostream>
class C {
public:
C() { std::cout << '+' << this << "\n"; }
~C() { std::cout << '-' << this << "\n"; }
};
typedef C T[5][5];
int main() {
void *t =
浏览 1提问于2018-04-26得票数 1
回答已采纳
我想过滤数据并在搜索栏中实现。在Hook/index.js组件中，我在useEffects中获取和过滤数据。然后我在App.js传递道具。之后，我有了一个搜索栏组件，在这里我正在侦听输入，在这里它必须工作。我得到了未定义的。
Hook/index.js组件
import React, { useState, useEffect } from "react";
import "./hook.scss";
export default () => {
const [data, setData] = useState([]);
const [erro
浏览 2提问于2020-09-10得票数 0
在我的状态中有一组对象。我想更新数组中的最后一个对象。但是，在更新对象时，我不想显式地提到键。
现在我的代码就是这样的。
import React from 'react'
import update from 'immutability-helper'
class Container extends React.Component {
state = { queue: [
{title: 'title 1', message: 'message 1', dismissible: false},
{title
浏览 0提问于2018-12-31得票数 0
回答已采纳
我正在开发一个简单的数独应用程序，但我意识到我的代码在状态改变后不能重新呈现。我已经用所有空值初始化了一个2D矩阵。然后我通过读取我的JSON文件来填充矩阵。在这里，当我使用setter函数setValueMatrix时，我的代码不会重新呈现。我通过控制台将输出记录在setter下面的函数中，这里它显示了新的输出，但在return函数中，它仍然显示为null。 因此，我尝试创建另一个名为setName的状态变量，并在setValueMatrix下面更新它，然后代码重新呈现！ 为什么我的代码在setValueMatrix之后不会被重新渲染？ 附加的代码在setter函数旁边有注释。 impor
浏览 17提问于2020-07-24得票数 0
回答已采纳
2回答
我有问题，更新嵌套的状态数组，我有模块，用户扫描QR代码的值将更新跟踪号码。目前，我使用react作为我的前端，laravel作为后端。
问题:当我扫描QR码时，跟踪编号没有设置为特定的id。
目标:我希望将QR值设置为特定的id，而不是创建一个新的数组。
预期输出必须为id 33
"bookings": [
{
"id": 33,
"tracking_number": '83827172',
"status": "deliver",
"
浏览 6提问于2022-08-04得票数 0
1回答
我正在尝试使用编辑/删除资料表中的一行。虽然我可以看到状态正在被修改，但它不会重新呈现实体表。useeffect不是在setdata之后触发的。
import React, { useState, useEffect } from "react";
import faker from "faker";
import MaterialTable from "material-table";
import * as _ from "lodash";
let testData = [];
for (var i = 0; i <
浏览 1提问于2019-08-05得票数 3
回答已采纳
1回答
我有非常新的反应和尝试学习反应概念，同时建立一个基本的时间表网站。这里，我从输入字段获取数据并以状态存储，但是如何将此表单数据呈现给表组件呢？下面是共享代码和文件结构的事件组件，也就是主组件
import React from "react";
import {Container, Row, Table} from "react-bootstrap";
import EventModal from "./EventModalButton";
class EventList extends React.Component{
render(
浏览 9提问于2020-08-29得票数 1
我对react很熟悉，现在我刚刚创建了一个使用react本机init命令的react本机项目。我在App.js文件中注意到，
export default class App extends Component<Props> {
}
<Props>在这里是什么意思？
浏览 0提问于2019-04-04得票数 2
回答已采纳
3回答
考虑到以下代码：
void Main()
{
dynamic[] arr = { 5, "test2", "test3"};
foreach (var i in arr)
{
Console.WriteLine(i.GetType().Name);
}
}
它打印了以下内容：
Int32
String
String
我不明白数组怎么会有不同类型的元素。从C背景来看，数组元素应该具有相同的类型，每个元素应该占用相同数量的RAM。因为在C中，类似于arr[i]的东西将等同于*(arr + i)，指针arr将移动i *
浏览 6提问于2019-10-20得票数 1
回答已采纳
2回答
我正在学习。当我看到代码时，我弄糊涂了，为什么我们需要先serialize object，然后再deserialize它呢？这是由于我们想要一个Object (或任何其他原因)？那么我们为什么不返回object或serialize对象呢？
public static Object clone(Serializable object) {
return deserialize(serialize(object));
}
浏览 2提问于2015-08-05得票数 2
回答已采纳
1回答
我正在学习，尝试制作一个todo应用程序。我的状态是这样的
[
{
taskName:"ABS",
status: true
},
{
taskName:"XYZ",
status: false
}
]
基本上，每个任务都是一个对象。每当我按下按钮时，我都想切换特定任务的状态(它在红色和绿色之间改变颜色)，所以我设计我的还原器如下：
附录1：
var stateClone = [...state];
stateClone[action.index].status = !stateClone[action.index
浏览 1提问于2018-03-23得票数 1
回答已采纳
4回答
如何使用将新值推入当前数组？
、、、、
这是源代码。
import React, { useState } from "react"
import ReactDOM from "react-dom"
import "./styles.css"
function App() {
const [arr, setArr] = useState([1,2,3])
return (
<div className="App">
<h1>
Length:{arr.length}
浏览 3提问于2019-12-21得票数 1
回答已采纳
请考虑React本机中的以下代码：
import React, { useState } from 'react';
import { Text, View } from 'react-native';
export default function App() {
const [recommendations, setRecommendation] = useState<any[]>([]);
return (
<View>
{recommendations != [] ?
(
浏览 5提问于2020-06-04得票数 0
回答已采纳
我有一个Java的Object[]，我想把它转换成IProject[]，这是一个Java接口(org.eclipse.core.resources.IProject)，以便为eclipse编写一个插件。
这个是可能的吗？
问候
浏览 0提问于2011-08-31得票数 1
回答已采纳
我将表单值传递给myDoc组件，但它显示对象作为are子组件无效，我是React 错误的初学者:对象作为React子对象无效(找到:带有键{}的对象)。如果您打算呈现一个子集合，请使用数组代替.。
import React,{useState} from 'react'
import {
PDFDownloadLink,
Page,
Text,
View,
Document,
StyleSheet,
} from '@react-pdf/renderer'
const styles = StyleSheet.create({
pag
浏览 3提问于2021-02-17得票数 2
回答已采纳
1回答
我在React中创建了一个网格组件。我有一个名为“availableColors”的字符串数组，在其中存储我想要使用的css类名。
在“RandomColorGrid”组件中，我在“useState”中设置每个网格项的初始颜色，将索引从“availableColors”分配给每个项。
网格中的每个项都调用'changeColors()‘onClick。在该方法中，我重新分配了“颜色”中每个“框”的值，并从“可用颜色”中随机选择了一个新的索引。
这个很好用，但感觉有点笨重。有两件事我正在努力改进，但却被困住了。
首先，当调用'changeColors()‘函数时，我只想使用每种颜
浏览 3提问于2022-05-17得票数 1
回答已采纳
2回答
创建字符串缓冲数组
、、、
我正在尝试创建一个字符串缓冲区数组，方法是：
StringBuffer[] rotor={"jndskfnjl","kjbsdbfkj","njkfdn"};
并显示错误“字符串无法转换为字符串缓冲区”。但是我可以创建一个字符串数组而没有任何问题，并且我可以创建声明单个字符串缓冲区的方式与字符串类似，而不必转换它们。
请告诉我如何制作一个字符串缓冲区数组。
浏览 1提问于2015-09-15得票数 1
回答已采纳
将原始数组作为支柱传递，但它似乎被React / jsx修改为一个json对象，该对象的键名为"0“、"1”等，与数组元素相对应。这使得无法判断支柱实际上是数组还是单个组件。
例如,
MyComponent有：
propTypes: {
attachedComponents: React.PropTypes.oneOfType([React.PropTypes.array, React.PropTypes.object])
}
实例化MyComponent并传入一个数组：
var foo = <Foo /> // my custom
浏览 3提问于2017-01-22得票数 0
回答已采纳
3回答
import React, { useState, useEffect } from "react";
export const Test = () => {
const [data, setData] = useState([]);
const file = [{ id: 1, description: "Test Data" }];
useEffect(() => setData(file), []);
const manipulateData = (data) => {
let tempArray = [..
浏览 6提问于2022-03-26得票数 1
1回答
如何强制对映射数组进行新排序？
、、、、
如何在使用map()函数时，从map()函数外部创建一个重新排序对象数组的按钮，如下所示：
let [myArr, setMyArr] = React.useState([{x: 1, y: 5, z: 'cat'},{x: 3, y: 4, z: 'snake'},{x: 5, y: 3, z: 'fish'},{x: 2, y: 1, z: 'dog'},{x: 4, y: 1, z: 'parrot'}]);
return (
<div>
<button
浏览 0提问于2021-07-01得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
