如何在React中的setState对象数组上添加项？
在React中，可以通过以下步骤来在setState的对象数组上添加项：
- 首先，使用setState方法来获取当前的状态对象。setState是一个异步操作，它接受一个回调函数作为参数，该回调函数将在状态更新完成后执行。
- 在回调函数中，使用展开运算符（spread operator）来创建一个新的数组副本。这可以确保我们不直接修改原始状态对象，而是创建一个新的对象。
- 在新的数组副本中，使用push()方法或concat()方法来添加新的项。push()方法会直接修改原始数组，而concat()方法会返回一个新的数组。
- 最后，使用setState方法将新的状态对象设置为组件的状态。这将触发React重新渲染组件，并更新视图以反映新的状态。
下面是一个示例代码：
this.setState(prevState => {
// 创建新的数组副本
const newArray = [...prevState.array];
// 添加新的项到数组中
newArray.push(newItem);
// 返回新的状态对象
return { array: newArray };
});在上面的代码中，假设我们的状态对象包含一个名为array的数组。我们使用展开运算符创建了一个新的数组副本newArray，并使用push()方法将新的项newItem添加到数组中。最后，我们通过返回一个新的状态对象来更新组件的状态。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：提供可扩展的计算能力，适用于各种应用场景。产品介绍链接
- 云数据库 MySQL版（CDB）：高性能、可扩展的关系型数据库服务。产品介绍链接
- 云存储（COS）：安全、稳定、低成本的对象存储服务。产品介绍链接
- 人工智能机器学习平台（AI Lab）：提供丰富的人工智能算法和模型训练平台。产品介绍链接
- 物联网开发平台（IoT Explorer）：帮助用户快速构建物联网应用的全托管服务。产品介绍链接
请注意，以上仅为腾讯云的一些相关产品示例，其他云计算品牌商也提供类似的产品和服务。
相关·内容
我尝试在状态对象中的menuHistory键下存储一个字符串数组，当页面更改props.location更新时，我用'first‘初始化它，这会触发useEffect()，然后我会尝试将位置推入数组。 我得到的错误是.. Argument of type '{ menuHistory: number; }' is not assignable to parameter of type 'SetStateAction<{ menuHistory: string[]; }>'.
Type '{ menuHistory: number
浏览 27提问于2019-09-13得票数 0
回答已采纳
如何在同一个对象key: 1中添加具有新Time的keep更新状态？
它应该是这样的：
time: ["21:10:56", "21:10:56", "21:10:56"]
目前，每次我按一个键，它都会创建一个新的对象。
当我在Number Two输入中输入值以拥有自己的key: 2对象并向其添加时间值时，情况也是如此。
const {useState, useEffect} = React;
const App = () => {
const [state, setState] = useState([])
co
浏览 12提问于2020-06-05得票数 0
回答已采纳
2回答
我有一个从react-native-picker-select挑选的人。我也有按钮，如果我按下它，我想把道具传递给挑选者，并把它作为标签显示。
我尝试从按钮中设置一个callback函数，将道具传递给选择器，并将标签设置为道具。我可以看到道具正在传递，但拾取器没有更新。
Score.js
<View style={styles.button}>
<TouchableOpacity
style={styles.scoreButton}
onPress={() => this.props.pressMe()}>
浏览 6提问于2019-10-25得票数 0
1回答
fetch请求调用的JSON如下所示：
[{
"type": "1",
"First": {
"Id": "123456"
}
},
{
"type": "2",
"Second": [{
"Id": "13333"
},
{
"Id": "255555"
},
{
浏览 2提问于2019-05-29得票数 0
回答已采纳
1回答
React项目-唯一的ID
、、、、
我试图为列表项引入唯一的标识符，而不是使用索引，但是我尝试的每一种方法，我似乎都无法让它在子项目中工作。这是我工作的基地。我确实从'uuid';安装并导入了导入{ v4 as uuidv4 }，以使它更容易一些。
您所要做的就是简单地放入'uuidv4()‘来生成一个随机ID。
亲本
import React from 'react';
import './App.css';
import ShoppingCartList from './ShoppingCartList'
import { v4 as uuidv4 }
浏览 3提问于2020-10-06得票数 1
2回答
我已经在React.js上实现了无限滚动，这里是我的无限滚动组件，运行良好。
import React, {useRef,useCallback} from 'react';
function InfiniteScrollContainer(props) {
let {children,loadMore,hasMoreItems,classes} = props;
const observer = useRef()
const bottomRef = useCallback(node => {
if (observer.curr
浏览 3提问于2020-12-07得票数 4
回答已采纳
2回答
import React, { Component } from 'react'
import Item from './components/item'
import './App.css'
class App extends Component {
state = { item: "", array: [], check: false }
setItem = (event) => {
this.setState({
item: event.target.valu
浏览 2提问于2020-09-11得票数 0
我有一个数组，我有两个组件(子组件和父组件)。我在父组件中迭代数组，我渲染子组件，我用数组中的数据给它们道具。
子组件将其道具转换为状态，然后递增和递减该状态。
父组件可以将新项添加到数组中并重新呈现。但。如果我取消了数组前面的新项的移位( unshift() )，我会将数组中的最后一项添加到屏幕上，而不是将新项添加到前面。
问:为什么用.push()渲染效果好，而用.unshift()渲染效果差？同样，使用concat和newItem，...oldArray一切都可以，但是当我在数组前面添加项时，相同的东西就不好了？另外，如何正确地.unshift()新的项目(评论，计数器，图片，帖子，如任
浏览 12提问于2017-07-20得票数 4
1回答
如何使用react (redux -持久化)从本地存储中删除特定项(by id)？handleSubmit工作得很好，但handleDelete却不行。我有这个：
handleSubmit = event => {
event.preventDefault();
this.props.addWeather(this.state.weatherCity);
this.setState({ weatherCity: "" });
};
handleDelete = (event, id) => {
this.props.delet
浏览 2提问于2022-02-07得票数 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
回答已采纳
4回答
我用React可排序的专案来移动物品。我的初始状态是一个空数组，我需要用中的函数更新状态。
这是来自React可排序的原始片段。
onSortEnd = ({oldIndex, newIndex}) => {
this.setState(({items}) => ({
items: arrayMove(items, oldIndex, newIndex),
}));
};
我的状态和功能如下
const [colors, setColors] = useState([])
function onSortEnd({ oldIndex, newInde
浏览 1提问于2019-09-03得票数 7
回答已采纳
我已经在react中创建了一个json基础表单。当我尝试将我的状态添加到change事件时，它只显示实际的元素。我想在我的state.SERVICE对象中放入3个输入域。
state = {
SERVICES: [],
ITEMS: []
};
handleChange = event => {
const { name, value } = event.target;
this.setState({ [name]: value });
//It shows all the ele
浏览 18提问于2019-12-02得票数 0
import React from 'react';
import {Jumbotron} from 'react-bootstrap';
import axios from 'axios';
import './App.css'
export default class Form extends React.Component{
state={
user:[],
firstname:'',
lastname:'',
}
handleChange = event =>
浏览 0提问于2018-03-22得票数 4
6回答
从项数组中删除项不起作用
、、、
我试图从项目列表中删除一个项目，但它似乎不起作用。我有一个页面，我可以动态添加条目，也可以单独删除项目。加法似乎很好。
沙箱：
代码
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: "",
values: []
};
}
onC
浏览 0提问于2019-09-18得票数 0
回答已采纳
试图构建一个简单的搜索过滤器。将根据输入字段的值对项表进行筛选。这是组件的相关部分..。不幸的是，我得到了一个错误: Uncaught : this.state.texts.filter不是t.value的一个函数
知道问题是什么吗？是因为我在钥匙上作图吗？非常感谢你的帮助！
import React from 'react';
import TextCardInTable from './TextCardInTable';
const textsFileName = 'texts3.json'
class
浏览 1提问于2018-06-27得票数 1
回答已采纳
好吧，这让我快疯了！必须从头开始对项目进行编码，以确定问题所在。
基本上，我试图通过构建一个web应用程序来练习反应，这样我就可以分享spotify的歌曲了。这是我的组件树(只有重要的组件: App.js -> Navbar，Post ->，然后在Post中我有一个Post组件列表。以下是密码：
import React, { Component } from 'react';
import './App.css';
import {BrowserRouter} from 'react-router-dom';
import Na
浏览 0提问于2018-08-20得票数 2
我在这里非常困惑，我试图遵循这个question，但不断得到错误对象作为react子对象是无效的。或者属性未定义。 api的响应应该类似于[{id:1, name: hugo}, {id:2, name:sally}]。 是什么导致了这些错误，为什么组件不会在加载时挂载生命周期组件更改状态。 为什么当我尝试console.log结果时，我得到的结果是未知的。 import React, { Component } from 'react';
import { Button, Form } from "semantic-ui-react";
import { a
浏览 18提问于2019-06-20得票数 0
回答已采纳
如何在react的类组件中为状态数组赋值？ class Dashboard4 extends React.Component {
state = {
TotalParts: 0
};
async componentDidMount() {
const d = await actions.getTotalParts();
this.setState({ TotalParts: d[0].Total });
this.setState({ v_date: d[0].v_date });
}
} 在上面的代码片段中，只有一个值被赋值给TotalP
浏览 54提问于2019-04-10得票数 1
回答已采纳
试着把我的头放在道具上，所以如果这是个愚蠢的错误请原谅我。我试图将我所有的数据传递到一个变量中，并将其传递到道具中(使用{item.text}和{item.key})，但是，我的".map“没有捡到任何东西，而且有很多错误，我的代码有什么问题吗？
这个问题特别出现在这个代码块中。
createList(list) {
return <li>{list.text}</li>
}
render() {
var entries = this.state.list
var final
浏览 0提问于2019-05-16得票数 0
回答已采纳
我用平板表来显示数据，作为回应，我得到了一些数据。
但是，json响应字符串是以{}大括号开始的，而不是从[]括号开始的。
因此，在错误之下：
不变违规:尝试获取超出范围的索引Nan的帧。
做完日志后，我在我的dataSource of FlatList is [Object Object]中得到了什么
我在postman和它的类似项中检查了json响应：{{[[]}}，简而言之，它不以[]括号开头。
因此，我在这里有点困惑，即FlatList必须有以[]括号开头的dataSource或json响应。
如果没有，那么错误会有什么问题呢？如果是，我如何以所需的格式转换它？
谢谢。
编辑
这样做：
浏览 2提问于2018-08-01得票数 0
回答已采纳
我在讨好反应本地人。
我正在尝试创建一个ImageGallery。创建此库的步骤之一是以API的结果在状态下启动数组。
I在名为“”的状态下启动一个空数组
这是我的密码
import React from 'react';
import {
View,
Image,
FlatList
} from 'react-native';
export default class TestGallery extends React.Component {
constructor(props) {
super(props);
th
浏览 2提问于2020-03-29得票数 1
回答已采纳
我在React应用程序中使用react-addons-update npm包，并特别希望使用update()方法在对象数组中插入新对象。我将此结构作为组件状态的一部分：
...
constructor(props) {
super(props);
this.state = {
blocks: [
{
block_title: "some title",
items: [
{
浏览 30提问于2016-08-25得票数 1
我正在用React.js做一个列表。这个应用程序将包含两个列表，用户可以创建一个包含一些项目的列表。
例如,
1)列表列表(如1)水果列表2)蔬菜列表
2)物品清单(如1)水果-- 苹果，2个香蕉，3个橙子)
列表的数据以数组的形式存储在对象中，项的列表以数组的形式存储在对象中。我不能理解的是在状态中将数组传递给对象。
下面是我的代码: App.js
class App extends Component {
constructor() {
super();
this.state = {
lists: [], // this holds the name of each l
浏览 1提问于2017-10-09得票数 3
嗨，我试着在react本机中使用AsyncStorage进行简单的获取和更新。
我使用以下代码在componentDidMount()中获取数据：
AsyncStorage.getItem('mytrips', (err, result) => {
if(result !== null){
var data = JSON.parse(result);
console.log(result);
this.setState({
email: data.email,
fi
浏览 2提问于2017-09-24得票数 1
回答已采纳
这是我的代码：
Search.tsx
import * as React from 'react';
import axios from 'axios'
import Suggestions from './Suggestions'
const API_KEY:string = "process.env"
const API_URL:string = 'http://127.0.0.1:9001/v1/test'
export class Search extends React.Component{
st
浏览 2提问于2019-03-10得票数 0
回答已采纳
我正在使用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
回答已采纳
我在多个web应用程序中使用了redux with react。目前，我正在开发我的第一个反应本地应用程序与Redux。
我遇到了一个很奇怪的问题。
我已经创建了一个商店，并将其传递给提供者组件，该组件将App组件呈现为子组件。(的基本用法)
在应用程序中，我有一个连接的组件。它在调用navigator.push(路由)时将从存储区接收到的数据传递给导航器路由。此路由上的组件不是连接的组件。它接收道具，将道具存储在其状态。--道具不仅仅是文字，而是对象/数组。根据用户交互，此组件通过setState更新其状态。此操作直接更新存储。
我不应该在组件状态上设置通过matchStateToProps
浏览 2提问于2016-12-24得票数 3
回答已采纳
我在组件中呈现我的props.command时遇到了问题，这里会发生一个错误
import { getCommand } from '../../actions/commandActions';
import { connect } from 'react-redux';
class Command extends React.Component {
constructor(props) {
super(props);
this.state = {
commands: []
浏览 2提问于2017-02-02得票数 0
回答已采纳
我似乎在这里找不到与这个场景相关的答案。
我的React组件中有我的状态：
this.state = {
clubs: [
{
teamId: null,
teamName: null,
teamCrest: null,
gamesPlayed: []
}
]
}
我通过API请求接收一些数据，并且只更新其中的一些状态，如下所示：
this.setState((currentState) => {
return {
clubs: c
浏览 1提问于2019-04-12得票数 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
我正在做一个简单的列表制造者，使用create来做列表应用程序，而且我很难弄清楚这个功能。我用这个应用程序想要做的是：
我希望能够输入文本到一个输入，按下按钮或按回车，和任何文本将列出在应用程序的主体。
我希望能够创建一个按钮，该按钮将在任务或目标完成后删除列表项。
到目前为止，我的代码被分解为以下组件：
App，ListInput，ItemList，项目
应用程序的代码是
import React, { Component } from 'react';
import './App.css';
import Navigation from &#
浏览 0提问于2018-09-30得票数 3
回答已采纳
我一直在学习如何做出反应，早些时候我只是用axios调用componentDidMount中的api --它工作得很好。
现在，这个任务没有从api获得数据，因此我在componentDidMOunt中通常称为setState，但是由于setState是异步的，所以当我需要它时，它没有被更新。
我想知道我应该如何写这个，以减轻这个问题。下面是一个简单的类代码。
import React from 'react'
import CarCapacity from '../Components/TextBox/CarCapacity'
import rando
浏览 0提问于2019-05-12得票数 0
回答已采纳
大家好，我正在编写一个小应用程序。我是实习生程序员。我需要帮助来理解如何在我的应用程序上使用道具。我目前使用的是来自CodePen的一个组件，我从jsonplaceholder获取了数据。但是我不知道如何在这个组件和App.js之间传递道具。对于更简单的组件没有问题，但这里有很多方法和事件。有了这个标记的输入，我想要添加或删除项目。
import React from "react";
import StateFullComponent from "./components/StateFullComponent";
import StatelessC
浏览 0提问于2019-04-26得票数 1
我目前正在尝试清理我的Todo应用程序的代码，并使用更多的不可变性。因此，我已经替换了handleStatus函数中的代码。
由此：
handleStatus(event) {
let newStatus;
const changeState = event.status == 'done' ? newStatus = 'open' : newStatus = 'done';
//Verkürzen Copy State
let todo = event;
todo.st
浏览 3提问于2022-03-18得票数 0
目标：用于显示用户从DatePicker中选择时间的时间列表。
问题：它只显示一个时间，而不是时间列表。
我可以从数据报警器中选择时间。当我单击ok时，所选的时间显示在平面列表上。然而，在选择一个新的时间，旧的时间会被取代。这只会在列表中显示1次。
我在下面添加了应用程序的截图。
因此，对解决这一问题的任何帮助都将不胜感激。
代码片段如下：
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, FlatList } from
浏览 2提问于2019-12-19得票数 0
回答已采纳
我正在尝试创建一个名为hidden的状态变量作为字典(ex：[{'cutomkey1':'somevalue', 'customkey2':'somevalue'}])。隐藏可以是空的[{}]。
在我的一种方法中，我希望将一个项{'asd':'asd'}推到隐藏状态变量中，并将它们相加。
我一直在找这个错误：
类型“未定义的String[]”不是数组类型。
我对打字本并不熟悉，我不确定我是否正确地设置了所有的变量。这是我的代码(只有相关部分)：
import React from 'rea
浏览 5提问于2021-03-03得票数 3
回答已采纳
我正在尝试将一个电影对象推入状态中的favorites数组，当有东西被单击时。 将favoritesArray设置为状态会起作用： addToFavorites = (movie) => {
const favoritesArray = [];
favoritesArray.push(movie);
this.setState({favorites: favoritesArray});
} 但是当我尝试使用React推荐的更新函数时，我得到了错误： this.state = {
favorites: []
};
addToFavorites = (movie) =&g
浏览 27提问于2019-05-30得票数 1
回答已采纳
3回答
我试图将从API中提取的数组的每个元素添加到react中的现有状态中。我如何才能取出每个元素并将其添加到状态中？
我知道该怎么做。它不能在这种情况下工作，因为新的数据是一个数组。
state= {}，{}，{}
newData= {}，{}，{}
setState([...state, newData])
浏览 3提问于2021-06-14得票数 2
回答已采纳
2回答
我正在使用React-Rails gem并从Rails控制器访问json对象items。
Rails控制器：
class ItemsController < ApplicationController
def index
@items = Item.all
render json: @items
end
end
我的React App组件访问这些项，并尝试将其作为道具传递给子组件：
class App extends React.Component {
constructor(props) {
super(props);
t
浏览 0提问于2016-04-09得票数 0
3回答
我目前正在使用以下方法将我的数组映射到setState，但是没有设置任何内容，也没有记录错误。如果我显式地逐行写出它，它就能工作。对于如何解决这个问题，有什么想法或建议吗？
具有数组的集状态：(不setSate)
const myData = ['message', 'photo', 'isLoggedInhoto'];
const newData = [];
{[...Array(myData.length)].map((x, index) =>
newData.push(myData[index])
)}
this.setSta
浏览 10提问于2016-12-13得票数 2
回答已采纳
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
回答已采纳
我正在尝试在react上构建一个简单的todolist应用程序，我遇到了这个问题。我可以编写必要的代码将待办事项添加到状态中定义的列表中并显示它，但是当涉及到通过单击每个待办事项旁边的按钮从列表中删除项目时，除了第一个项目之外，所有的待办事项都会从列表中删除。我该怎么办呢。代码如下：
TodoList(父)组件：
import React, {Component} from 'react';
import AddTodos from './AddTodos';
import DisplayTodos from './DisplayTodos'
i
浏览 0提问于2020-04-29得票数 0
2回答
在react应用程序中，我试图向现有数据中添加一个键值对数据，但它不起作用。
目前的静态数据是，
const result = [{
{id: 0, important: false, name: "Shruthi R", phone: "9834233433", email: "shruthi@gmail.com", work: "NicheSoft", city: "Mysore"},
{id: 1, important: false, name: "Paridhi Sharma", pho
浏览 3提问于2020-11-24得票数 1
回答已采纳
我遇到了一个奇怪的问题，我找到了答案，但我想知道背后的原因。
我有一个react组件，它向服务器发送请求，并在得到结果后将其设置为组件的状态。
class Featured extends React.Component{
constructor(props){
super(props);
this.state = {
data : ['', ''],
error: null,
}
}
componentDidMount(){
axios.get('/api/featured')
浏览 15提问于2018-08-19得票数 4
回答已采纳
因此，我正在开发一个待办事项列表应用程序，在该应用程序中，我可以将任务添加到页面正文中，并删除已完成的任务。我正在做最后一部分的应用，使删除按钮的功能。但是我的delete按钮函数，onRemove函数，在未定义的情况下返回一个错误。我不知道它为什么要这么做，因为代码在我看来很好。也许你的眼睛能捕捉到我错过的东西？我有另外两个组件，这个应用程序，如果你需要参考。
我的是处理所有逻辑的地方，包括onRemove函数：
import React, { Component } from 'react';
import './App.css';
import Navig
浏览 0提问于2018-10-03得票数 1
回答已采纳
我一直在尝试用大多数频率呈现单词。我已经完成了获取API.To呈现单词的工作，在render()中还有setState单词和映射的单词数组，.I是期望的单词，有计数。我只得到作为1 1 1 1 1 1 1 1 1 1 1 2 1的数字。表中的数据。
import React, { Component } from "react";
import { Grid, Row, Col, Table } from "react-bootstrap";
import axios from "a
浏览 0提问于2018-01-19得票数 0
回答已采纳
当我在setState中使用fetch时，函数会发出两个网络请求，但我希望有一个请求。
为什么会发生这种情况，以及如何预防？
import React from 'react';
class TestFetch extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(()
浏览 3提问于2021-07-08得票数 1
回答已采纳
我在学习反应。在我的代码中，我面临以下问题：
在函数addCard中，为什么需要调用setState？如果我不打电话给setState，卡就不加了。
我已经读到，变异状态是不好的反应。因此，我们应该使用诸如immutable.js这样的库。我想知道这段代码是否遵循了React的标准实践(而不是钻研redux)。
import React, {Component} from 'react';
import ReactDom from 'react-dom';
class
浏览 2提问于2017-05-04得票数 1
我有两个useEffect挂钩，它们都将在startTime/endTime状态的变化中运行。
useEffect(() => {
if (selectedProduct) {
fetch(...)
.then(res => res.json())
.then(res => setMyState(res.data));
}
}, [selectedProduct, startTime, endTime]);
useEffect(() => {
if(selectedStep){
c
浏览 2提问于2021-05-19得票数 0
回答已采纳
我尝试在React JS中MultiSelect组件的属性"options“处分配一个数组，我需要在数组中指定一个特定的格式，但屏幕是空白的，我得到的options.map不是一个函数作为错误，数组返回成功(它是OK)，我不明白为什么会发生错误。 我的代码是： //I get data array
axios({
method: 'get',
url: `${URL}/suscripcion`,
headers: {
"Authorization": "bearer " + TOKEN
浏览 37提问于2019-05-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
