更新react中对象数组中的对象数组
在React中更新对象数组中的对象数组可以通过以下步骤实现：
- 首先，确保你已经安装了React和相关的依赖。
- 创建一个React组件，并在组件的state中定义一个对象数组。
import React, { useState } from 'react';
const MyComponent = () => {
const [data, setData] = useState([
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Bob' }
]);
// 其他组件代码...
return (
// JSX代码...
);
}
export default MyComponent;- 在组件中编写一个函数来更新对象数组中的对象。这个函数应该接受一个新的对象数组作为参数，并使用
setData函数来更新state。
const updateData = (newData) => {
setData(newData);
}- 在组件中调用
updateData函数来更新对象数组中的对象。
updateData([
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Alice' }
]);这样，当调用updateData函数时，对象数组中的对象将被更新为新的对象数组。
关于React中更新对象数组中的对象数组的更多信息，你可以参考以下链接：
请注意，以上答案中没有提及任何特定的云计算品牌商，如腾讯云。如果你需要了解与云计算相关的腾讯云产品和服务，可以访问腾讯云官方网站获取更多信息。
相关·内容
目标：用于显示用户从DatePicker中选择时间的时间列表。
问题：它只显示一个时间，而不是时间列表。
我可以从数据报警器中选择时间。当我单击ok时，所选的时间显示在平面列表上。然而，在选择一个新的时间，旧的时间会被取代。这只会在列表中显示1次。
我在下面添加了应用程序的截图。
因此，对解决这一问题的任何帮助都将不胜感激。
代码片段如下：
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, FlatList } from
浏览 2提问于2019-12-19得票数 0
回答已采纳
2回答
我是新来的反应。我在做一个小项目。我必须显示一个表(listFeatures.js)，并且可以通过表单提交(addTech.js)将行添加到表中。但是，政府的变化并没有得到反映。在这种情况下，我可能觉得useEffect()可以帮助我，但我不知道如何正确地使用它。有人能帮忙吗..。
代码给出的
app.js
import React, { useState, useEffect } from 'react'
import ListFeatures from './components/ListFeatures/listFeatures'
import AddTe
浏览 4提问于2021-12-28得票数 0
回答已采纳
我使用来自react-navigation/native的react-navigation/native函数作为useEffect的依赖项来监听屏幕焦点，所以当我向后导航时，它与isFocused和myRoute.params.isChecked一起进入if以执行该函数。
但是它没有更新setRoute(newRoute);和setIsLoading(false)上的路由状态。函数中的setIsLoading(true)被调用，但是useEffect路由中的一个没有调用，因为它从不调用路由更新。正因为如此，屏幕一直在无限地加载。
为什么它不更新isLoading和route状态？
import
浏览 6提问于2022-06-02得票数 2
回答已采纳
3回答
我是个新手，我想知道当我复制状态对象中的一个对象时，状态对象什么时候会受到影响。 在下面的代码中，第一种情况会导致状态对象更新，而第二种情况则不会。我需要知道有什么不同，为什么会发生这种情况？ import React, { Component } from "react";
export class Test extends Component {
state = {
counters: [
{ id: 1, desc: "Item1 default description" },
{ id: 2, desc: "
浏览 26提问于2019-10-05得票数 0
回答已采纳
我使用React已经有一段时间了，昨天我在一个基于Typescript的项目中接触到了我的脚。在重构之前，类有这样的状态： interface INavItemProps {
route: IRoute;
}
interface INavItemState {
toggleStateOpen: boolean
}
class NavItem extends Component<INavItemProps, INavItemState> {
constructor() {
this.state = { toggleStateOpen: false };
浏览 18提问于2019-02-19得票数 4
回答已采纳
据我理解，迭代数据列表最常用的方法是map，它是一种遍历数组的数组方法，但是当我试图在这里应用它时：
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';
class QuestionList extends Component {
state = { questions: [] };
componentWillMount() {
axios
.g
浏览 0提问于2018-05-13得票数 0
回答已采纳
我使用react-apollo来管理我的react应用程序中的客户端存储，所以没有后端graphql服务器。所有与apollo相关的东西都在客户端运行。我将所有UI状态存储在ApolloClient的缓存中。我还在客户端定义了所有的解析器。 下面是新建客户端实例的代码： new ApolloClient({
cache,
resolvers: {
Mutation: {
...cartResolvers,
},
},
typeDefs: [typeDefs]
}); 我读过这篇关于在apollo graphql变异和
浏览 17提问于2019-06-28得票数 0
2回答
我有个医生和一个孩子。如下所示
亲本
export class ExpressionMenu extends Component {
constructor(props) {
super(props)
}
state = {
apiArray: [],
}
updateStateFromChild = (arrayType, propertyType, value) => {
let { apiArray } = this.state
let currentArray = []
let idx = apiArray.fi
浏览 3提问于2021-09-20得票数 0
回答已采纳
我正在尝试从React.Js中的API中检索数据，但是componentDidMount函数有一个小问题。 以下是https://projects.cmsbox.in/app/bms/movie/public/api/upcomingMovie接口 我已经用其他API尝试过这个代码，它工作了，但在这种情况下它不工作。我还检查了Postman中的API，一切似乎都很正常。 提前感谢:) import React, { Component } from 'react';
import './index.css';
import MovieCard from
浏览 10提问于2020-09-06得票数 0
我有一个react组件，它呈现一个封面列表和一个从list onClick中删除图书的按钮。我是在通过地图发送到道具删除操作和书架信息通过地图状态到道具。删除操作正在成功地从数据库中删除图书，并且正在击中我的还原器。但是即使状态更新，图书列表组件也不会重新呈现(除非我重新加载，否则删除的书不会消失)。
import React from 'react';
import { Link, withRouter } from 'react-router-dom';
import {CarouselProvider, Slider, Slide, ButtonBac
浏览 2提问于2017-10-21得票数 1
没有使用setState更新JSON状态。
1.我想要更改JSON中的特定数量值，为此，我向标记编写了一个IncrementHandler方法并实现了该函数，但它没有更新我的主状态
2.我在用于更新状态的函数中实现了setState方法。
import React, { Component } from 'react';
export default class App extends Component {
state = {
value: 0,
students: [
{
item: 'salad',
浏览 0提问于2020-12-04得票数 4
考虑下面的示例，该示例呈现iframe的列表。
我想将呈现的iframes的所有iframe存储在frames中。
import React, { useState, useEffect, useCallback } from "react";
import Frame, { FrameContextConsumer } from "react-frame-component";
function MyFrame({ id, document, setDocument }) {
useEffect(() => {
console.log(`S
浏览 2提问于2020-01-29得票数 0
回答已采纳
1回答
通过API发送MQTT数据
、、、、
我正在使用Ionic React创建一个显示温度的应用程序。我已经设置了一个API，用于发送MQTT温度数据并使用Axios获取数据。我一直在尝试弄清楚这是否是检索数据的最佳方法，因为我一直收到错误。
GET API
routes.get('/', (req, res, next) => {
let parsed = parseInt(test);
res.status(200).json({ temp: parsed })
})
Axios和React代码
import './ExploreContainer.css';
import R
浏览 40提问于2021-03-06得票数 1
回答已采纳
1回答
我在从后端获取数据时遇到了问题。当我试图从后端呈现数据时，会出现错误。
Portfolio.js:34 Uncaught TypeError: Cannot read properties of undefined (reading 'self')
at Portfolio.render (Portfolio.js:34:1)
at finishClassComponent (react-dom.development.js:17485:1)
at updateClassComponent (react-dom.development.js:17435:1)
at beginW
浏览 1提问于2022-05-04得票数 0
你好，我刚开始使用react，我正在构建一个餐馆应用程序，所以当我将react类应用程序转换为react挂钩时，我遇到了一个问题，如果在React类中，这不是很好的工作方式。
const RenderDish = (props) => {
const dish = props.dish;
if (dish != null) {
return (
<Card
featuredTitle={dish.name}
image={require('./images/uthappizza.png')}
浏览 0提问于2020-08-18得票数 0
回答已采纳
1回答
每次单击increment按钮时：
期望:当前count已记录
实际：count的初始值，即记录为3
import React, { useState, useEffect } from "react";
function SomeLibrary(props) {
const [mapState, setMapState] = useState(undefined);
useEffect(() => {
console.log("setting map");
// Run exactly once at mount of com
浏览 1提问于2020-07-22得票数 1
我使用React with material-ui框架。在文档中，有使用芯片进行选择的an example，它是由一个数组构成的。在那里，他们以这种方式删除并添加数组中的值： const [personName, setPersonName] = React.useState([]);
const handleChange = event => {
setPersonName(event.target.value);
}; 我需要做同样的事情，但是在数组中的对象中修改数组，如下所示： const [data, setData] = React.useS
浏览 20提问于2019-12-15得票数 1
1回答
从动态创建的子组件更改状态
、、、、
在这个应用程序中，您可以通过单击特定游戏的GOAL按钮来更改足球比赛的得分。问题是，我的匹配被保存在状态中，我用map方法呈现它们，并且不能对每个匹配动态地使用setState。
App.js
import React from 'react';
import Match from './components/Match';
import './App.css';
export default class App extends React.Component {
constructor(props) {
super(props
浏览 2提问于2019-12-13得票数 1
回答已采纳
1回答
我创建了一个简单的react应用程序，它使用redux来管理状态，但是当我分派操作去删除一个特定的状态时，它无法在新状态上映射，并且我得到了一个未定义的错误TypeError:无法读取未定义的属性(读取' map ')
这里是我的应用程序组件：
ACTIONS
import { DELETE_ARTICLE, ADD_ARTICLE } from "../constants/action-types";
let lastID = 3
export function addArticle(msg) {
return {
type: ADD_ART
浏览 2提问于2022-04-03得票数 0
我正在学习ReactJS，我正在尝试构建一个按钮网格，这些按钮可以单独选择/取消选择，一旦我按下提交按钮，我就可以收集按下的按钮。我应该如何以ReactJS的方式构建它呢？所有的按钮都应该有相同的尺寸。
一个额外的问题:我如何使用‘按住’事件来选择多个按钮，同时移动鼠标在它们上面？
App.js
import React from 'react';
import Grid from '@mui/material/Grid';
import { styled } from '@mui/material/styles'
浏览 1提问于2021-12-31得票数 0
回答已采纳
我正在尝试用react-redux更新我的数组(嵌套数组)中的一个数组。我找到了一个解决方案来解决这个问题，但是有没有比向操作传递多个参数更简单的方法呢？
[types.HISTORY_UPDATE](state, action){
return {
...state,
budgets: [
...state.budgets.slice(0,action.id),
{
key: action.key,
id: action.idd,
name: action.name,
budg
浏览 10提问于2019-10-20得票数 0
回答已采纳
1回答
Usestate未更新
、、、
React Hooks是个新手，我遇到了第三方api的问题。我正在获取数据，但是useState钩子没有更新我的状态值。我很确定这就是问题所在，因为我得到了一个错误，items.map不是一个函数。这个bc里面什么都没有？有人知道怎么处理这件事吗？
import React, { useState, useEffect} from "react";
import axios from "axios";
const FeaturedWorks = () => {
const [items, setItems] = useState([]);
con
浏览 4提问于2021-11-27得票数 1
这是我从一段视频中收集的代码，用于学习react with hooks。它应该从硬编码的数据中创建和命名3个计时器，并允许用户创建/命名新的计时器。我的代码与视频并不完全相同，因为我根本不能让他的代码工作。 问题是:我可以让它显示用户输入计时器或硬编码计时器的名称，但不能同时显示两者。现在，它将显示用户输入计时器的名称，但不会显示硬编码的名称。 import Timer from './timer'
import { useState } from 'react'
const TimerManager = () => {
const [name,
浏览 17提问于2020-09-16得票数 1
回答已采纳
1回答
我有一个很简单的问题。我使用钩子，在文档中给出了使用钩子更改文本的示例。但总有一些地方我搞不懂。
下面是我的代码：
import React, { useState } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
const HelloWorldApp = () => {
const [textUpdate, setText] = useState('text1');
const [todos, setTodos]
浏览 3提问于2021-01-01得票数 0
回答已采纳
这是控制台一直在记录正确的数组，但重点是它应该在'TodoList.tsx‘中输出该数组。我不知道在这种情况下如何解决这个问题。任何能帮我这个忙的人。若要查看更大的图片，请单击此链接：
我希望从App.js currentFilter函数返回的值将其传递给，以便当用户单击filter按钮时，它将不断更新映射函数。
// TodoFilter
import React from 'react';
interface TodoListFilter {
currentFilter: CurrentFilter;
}
export const TodoFil
浏览 1提问于2020-01-08得票数 0
如何使用setState更改处于react状态的数组中对象的值？
我的反应状态：
this.state = {
serviceFees: [
{
periodFrom: new Date(),
periodTo: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
serviceFeeType: 'percentage',
serviceFee: '',
refundableStatus: 're
浏览 4提问于2019-07-28得票数 0
在react应用程序中，我将默认值设置为[]，并尝试在shop.product不存在的情况下返回相同的值。仍然收到错误：(this.getProductList() || [])如果返回的列表为空，则.map不是函数。 class Product extends React.Component {
constructor(props) {
super(props);
this.state = {
resultsFallback: { items: [] }
}
}
getProductL
浏览 17提问于2020-04-02得票数 0
作为一个 React 启动程序，我试图在React应用程序中实现状态管理，并使用useContext在组件之间共享登录状态。
我开始学习和阅读这个问题：>。
我尝试了答案告诉我的--使用useEffect更新上下文的值：
const initContext: GlobalContext = {
login: false,
}
export const globalContext = React.createContext(null)
function App() {
return <globalContext.Provider value={useState(ini
浏览 8提问于2022-03-14得票数 1
回答已采纳
我有一个组件，它生成带有行数据的表(<tr>等)。基于通过AJAX调用检索的数据数组。所有操作都很适合编辑和添加数据，但我无法确定如何创建数组的不同副本(包含的对象的不同副本--通过val而不是ref)，以便当我删除指定的数据行时，适用的行将从表中删除。
目前，因为包含的对象都是ref，所以即使我复制数组时，我的表也删除了最后一行(尽管在AJAX调用中行索引和数据都被正确引用和删除)。
handleRowDelete: function(rowIdx) {
// Correct row
var row = this.state.data[rowIdx];
浏览 4提问于2015-03-10得票数 14
回答已采纳
我有一个对象数组(包含我的刺激)和一个函数(参见下面的摘录)，它收集反应时间并将所有反应时间‘推’到一个全局变量。
var stim = [ {name:"A", path:".../a.jpg", type: P},
{name:"A", path:".../a.jpg", type: T},
{name:"A", path:".../a.jpg", type: I}
];
var reac_arr = [];
浏览 0提问于2014-03-19得票数 0
只是想知道这里出了什么问题(我是新来的反应)。当用户在input中进行查询时，我的fetch请求可以工作，并从后端输入数据。但现在我收到了这个错误。
RecipeDBTest.jsx:54 Uncaught TypeError: Cannot read properties of undefined (reading 'recipe_name')
at GetRecipe (RecipeDBTest.jsx:54:1)
at renderWithHooks (react-dom.development.js:16175:1)
at mountIndete
浏览 8提问于2022-05-16得票数 1
回答已采纳
1回答
我在使用React更新元素列表时遇到了困难，当我运行下面的代码并单击一个'star‘元素时，将更新this.state.stars中的所有元素，而不是只更新给定索引中的元素：
class Ratings extends React.Component {
constructor(props) {
super(props);
let starArr = new Array(parseInt(this.props.numStars, 10)).fill({
icon: "*",
selected: false
});
浏览 1提问于2020-06-04得票数 1
回答已采纳
嗨，我正在尝试构建一个todo应用程序，并试图在todo列表中添加todo，但是我得到了以下错误：
TypeError:无法读取未定义的属性“映射”
以下是错误代码：
4 | function TodoList() {
5 | const list = useSelector((state) => state.todoList.text);
6 | return (
> 7 | <div>
8 | {list.map((todo)=>{
9 | <li>todo</li&
浏览 3提问于2021-09-05得票数 0
回答已采纳
1回答
我想使用一个映射函数来显示标签，但是我在TypeError中得到类似"Cannot read property ' label‘of undefined“的错误：”Cannot read property 'label’of undefined“
我使用单选按钮-react-native来做这件事。它有一个选项: data，它接受一个数据数组。这就是它的工作原理。因此，对于我的代码，正确的方法是执行此data = {data}。我之所以要使用map函数，是因为我想从我的服务器端获取数据。而且看起来什么都不管用
import * as React from '
浏览 1提问于2021-07-20得票数 0
2回答
我有一个钩子，可以在应用程序中显示一组警报。每次我调用钩子来推送数组并显示新的警报时，它都可以正常工作，但如果我想从子组件中删除此警报，则调用父钩子函数不起作用。
这是警报组件。"closeAlert“属性是调用父钩子函数的属性。调用该方法时，它会从数组中删除我想要的元素，但不会使用数组的新值进行呈现
import React from 'react';
import { Alert, Button } from '@themesberg/react-bootstrap';
import { memo } from 'react';
im
浏览 14提问于2021-05-31得票数 0
回答已采纳
现在我在react-redux工作。我正试着从州政府逐一询问问题。生成唯一ID用于存储状态中的问题，在用户提交后，答案也与问题一起存储。
唯一：{问题:问题在此，答案：'‘}
React组件来呈现问题。我使用mapstatetoprops中的选择器从状态中选择问题。
现在是我的问题:选择器第一次完美地触发。用户提交后，问题答案也会更新。在那之后，选择器没有触发，我找不到原因？
浏览 20提问于2017-03-02得票数 8
我尝试在set state方法中连接一个状态的名称，如下所示： onCallMethod(name){ //name is a string
this.setState({myState + name : true});
} 但我发现这并不起作用，我才刚刚开始在React Native中工作，我该怎么做呢？
浏览 2提问于2020-06-19得票数 0
回答已采纳
好的，我从React Native开始，用谷歌搜索了我能做的主题：
index.ios.js：
var React = require('react-native');
var { AppRegistry } = React;
var MarvelsApp = require('./components/start');
AppRegistry.registerComponent('MarvelsApp', () => MarvelsApp);
start.js：
'use strict';
var React = re
浏览 0提问于2016-03-03得票数 1
2回答
我正在学习反应，我似乎不知道如何从数组中移除一个项目。我尝试过几种方法，但它要么删除整个数组，要么删除数组中的多个项，因此找不到任何可行的解决方案。这是我的代码：
App.js：
import React, { useState } from 'react';
import Education from './Education';
export default function App() {
const [educationArray, setEducationArray] = useState([]);
const handleDeleteEdu
浏览 3提问于2022-04-15得票数 0
回答已采纳
我在使用redux和react-router时遇到了一个关于react子组件的问题。 为了在componentDidMount上进行API调用，我通过this.props.match.params从URL获取了一个值。我之所以使用this.props.match.params，是因为如果有人直接导航到这个特定的URL，我希望在我的内容中使用来自API的数据。 当我通过单击导航到该组件时，该组件呈现良好。API通过一个操作调用，reducer将数据分派给相关的prop。 当我通过点击URL直接导航到组件时，API被调用(我可以在devtools的Network部分看到它被调用)，但是数据没有被
浏览 12提问于2020-04-01得票数 0
我使用完整的日历在我的反应项目。虽然我对状态进行了更新，但无法刷新日历。
下面是我的示例代码：
在本示例中，当用户单击“更改标题”按钮时，我将更改事件的标题，但没有任何更改。我有错过什么吗？
谢谢你的帮助。
import React from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalenda
浏览 0提问于2019-08-23得票数 0
回答已采纳
在向列表中添加新项时，无法显示更新的列表。我尝试了控制台记录状态，发现state已经将新用户添加到列表中，但是列表中没有显示项。我在这个应用程序中有虚拟数据，所以列表在本地存储。我在每个函数上尝试了控制台日志来跟踪原因，但是每次只显示虚拟数据，并且在添加新用户时会显示一个空白的<li>块。
下面是代码
import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactCSSTransitionGroup from '
浏览 1提问于2018-11-26得票数 0
回答已采纳
您好，为什么react中的组件没有呈现？状态已更新，我在开发人员工具中看到它，但内容没有更改
完整代码：
import React, {useState} from 'react'
const List = (props:any) => {
const [actToDo, changeActTodo] = useState(props.actToDo)
const [ToDoLists, changeActToDoLists] = useState(props.ToDoLists)
return (
<>
浏览 9提问于2021-12-04得票数 0
我有一系列的对象。我希望我的函数点击()来向我的对象添加一个新的参数(可见: false)。我不知道如何在不重新创建整个对象数组的情况下告诉react来更新特定密钥的状态。
首先，是否有一个有效的方法来做到这一点(即使用扩展运算符)？
第二，也许我的整个结构已经关闭了。我只想点击我的元素，然后让它收到一个道具，表示它不应该再可见。如果需要的话，谁能建议另一种方法吗？
import React, { Component } from 'react';
import { DefaultButton, CompoundButton } from 'office-ui-fabr
浏览 2提问于2018-06-03得票数 1
回答已采纳
如何更新react js中嵌套对象的状态(在我的示例中为DeviceProperties )( IPAddress、用户名和密码)
[
{
"DeviceId": 217,
"Name": "My Name",
"PairedNetworkName": null,
"Description": null,
"VersionNumber": null,
"DeviceProperties": {
"IPAddres
浏览 2提问于2020-01-17得票数 0
3回答
我正在学习React钩子，因此为了做到这一点，我试图将类组件转换为函数组件，但我仍然收到一些错误。 以下是作为类编写的原始工作组件： import React, { Component } from 'react';
import NavBar from './components/navbar';
import Counters from './components/counters';
class App extends Component {
state = {
counters: [
{ id: 0, valu
浏览 132提问于2021-02-27得票数 5
回答已采纳
我使用context api来获得产品的全局状态，为此我使用了ProductsContext.js 我在ProductsContext.js中定义了一个空状态的数组 const [products, setProducts] = useState([]); 在同一个文件(ProductsContext.js)中，我使用useEffect从firebase检索所有产品，然后更新产品状态。下面是ProductsContext.js的所有代码 import React, { createContext, useState, useEffect } from 'react'
impo
浏览 35提问于2020-11-05得票数 0
我正在学习React课程，并尝试围绕代码做一些实验，以更好地理解概念。
我有一些虚拟数据：
export const data = [
{ id: 1, name: 'john' },
{ id: 2, name: 'peter' },
{ id: 3, name: 'susan' },
{ id: 4, name: 'anna' },
];
这是我的组件：
import React from "react";
import { data } from "../../../data"
浏览 0提问于2020-10-30得票数 0
2回答
React中的新对象属性
、、、
我有一个对象数组，它是从react应用程序的API中获得的。该对象具有诸如姓名、电子邮件、城市etc.Im等属性，试图创建一个新属性，例如年龄。我使用了下面的代码，但是react抛出了一个错误，告诉我不能将属性年龄设置为未定义。`
addAge = (age, index) => {
this.setState((prevState) => {
let newData = Object.assign({}, prevState.newData);
newData[index].age = age;
console.log(newData
浏览 8提问于2021-06-03得票数 0
1回答
我正在构建一个使用MERN堆栈和Redux作为状态管理器的社交媒体应用程序。我有一个提要组件，它呈现PostItem组件，这些组件显示帖子并允许诸如点赞和评论之类的操作。我还有一个Post组件，它呈现当用户单击提要中PostItem组件上的comment按钮时打开的相同PostItem组件。当我喜欢通过提要组件发布帖子时，它会接收更新后的道具，并重新呈现显示更改的组件。但是，当我单击Post组件中的like按钮时，它会更新Redux存储，但不会收到更新后的道具。 Feed.js import React, { Fragment, useEffect } from 'react'
浏览 10提问于2020-04-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
