如何setState到react中的嵌套数组
在React中，如果要更新嵌套数组的状态，可以使用setState方法来实现。setState是React组件中用于更新状态的方法之一。
要将嵌套数组设置为组件的状态，可以按照以下步骤进行操作：
- 在组件的构造函数中初始化状态，将嵌套数组作为一个状态属性。例如：
constructor(props) {
super(props);
this.state = {
nestedArray: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]
};
}- 在需要更新嵌套数组的地方，使用setState方法来更新状态。由于setState是异步操作，我们需要使用回调函数来确保在状态更新完成后执行相应的操作。例如，如果要将第一个嵌套数组的第一个元素更新为10，可以这样做：
this.setState(prevState => {
const updatedArray = [...prevState.nestedArray];
updatedArray[0][0] = 10;
return { nestedArray: updatedArray };
});在这个例子中，我们首先使用展开运算符创建了一个嵌套数组的副本。然后，我们更新副本中的值。最后，我们通过返回一个包含更新后的嵌套数组的对象来更新组件的状态。
- 在React组件中使用更新后的嵌套数组状态。可以在render方法中访问和渲染更新后的嵌套数组。例如：
render() {
const { nestedArray } = this.state;
return (
<div>
{nestedArray.map((innerArray, index) => (
<ul key={index}>
{innerArray.map((value, index) => (
<li key={index}>{value}</li>
))}
</ul>
))}
</div>
);
}在这个例子中，我们使用嵌套的map函数来遍历嵌套数组，并将其渲染为一个嵌套的ul和li元素列表。
总结起来，要将嵌套数组设置为React组件的状态并更新它，我们需要使用setState方法，并在回调函数中进行相应的操作。这样可以确保状态更新完成后，组件能够正确地渲染更新后的嵌套数组。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse
相关·内容
没有使用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
fun1 (){
fun 2(){
const [state1,setState1] = useState({})
}
export setState1
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/re
浏览 7提问于2022-09-28得票数 0
回答已采纳
class Form extends React.Component {
constructor(props) {
super(props);
this.initialState = {
name: "",
job: ""
};
this.state = this.initialState;
}
handleChange = event => {
const { name, value } = event.target;
this.setState({
浏览 1提问于2019-01-28得票数 1
下面是我正在编写的应用程序的一部分的虚拟复制品。
我使用const test对一个数据数组执行mapping操作，该数组返回星期几。一旦我点击了某一天，而这一天在this.state.testingDates.array中并不存在，我就会使用setState将这一周中的这一天添加到this.state.testingDates.array中。
当我点击某一天时，我得到了下面的错误Invalid attempt to spread non-iterable instance。
为什么我不能传播...array，所以我保留了旧的state，并以这种方式组织我的state，使array: []与cl
浏览 4提问于2020-03-12得票数 0
回答已采纳
我有这样的代码：
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [state, setState] = useState(0);
const add = () => {
setState(state + 1);
localStorage.setItem("data", JSON.stringify([state].push(state)));
};
浏览 7提问于2020-08-09得票数 0
回答已采纳
我经常在我正在工作的React代码库中看到这样的代码，感觉它会导致错误，但我只是在猜测。 代码示例： const newState = Object.assign({}, {}, this.state);
newState.x = '123';
newState.collection.push('abc');
this.setState(newState); 这段代码是不是会产生副作用，性能会更差，还是比下面的代码还好？ this.setState(prevState => ({
const collection = prevState.collec
浏览 23提问于2020-04-16得票数 0
我正在和socket.io和react一起工作。我在componentDidMount()中设置了侦听器，但不知何故，setState()函数并没有触发更新。当我记录data时，我可以看到从服务器发送的数据。下面是我的代码： this.state = {
list: []
};
public componentDidMount() {
this.socket = io('https://mybackendurl.com');
this.socket.on('an-event', data => {
console.l
浏览 16提问于2020-01-17得票数 0
在我的应用程序中，我使用的是react和with图表。目前正面临一个奇怪的问题和反应。我有一个菜单项，在它的单击事件上，它会做一些处理(比方说，将图表导出为图像)。因此，目前我观察到，它在我的react组件中的任何setState操作上都会被触发。当我查看调用堆栈时，我发现ReactErrorUtils.invokeGuardedCallback一直在反复发送此事件。
是否有人遇到类似的问题，在任何setState操作中都会触发单击的react组件。
浏览 0提问于2016-10-07得票数 7
当我在useState中听到history的变化时，我遇到了一些麻烦。
当pathname更改时，启动setState，然后添加state。
例如，我有一个收集通知组的flag组件，但是在pathname更改时，我希望从state中删除所有标志。
标志组件
const PageFlag = ({ history }: InterfaceProps) => {
const { contextData, dismissFlag, dismissAllFlags } = useContext(GlobalConsumer);
useEffect(() => {
histor
浏览 0提问于2019-10-27得票数 2
回答已采纳
我刚开始使用React，我正在尝试弄清楚如何setState到对象，但当我在函数中this.setState({ datasets.data：})时它不起作用，在函数中我需要在这里做什么？？ state={
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
data: [0, 10, 5, 2, 20, 30,
浏览 13提问于2020-07-02得票数 0
回答已采纳
我有一个对象数组，我目前正在映射这些对象作为按钮生成。单击时，我希望用户单击的特定按钮的背景色改变颜色(我希望它打开，就像开关一样，这样我就可以最终保存到异步存储中)。现在，当用户单击时，所有按钮都会更改颜色。我不太确定如何处理this.setState函数中的selectMetric。
import React, {Component} from 'react';
import {View, Text, ScrollView} from 'react-native';
import {Button} from 'react-native-element
浏览 4提问于2017-07-13得票数 1
回答已采纳
如何使用setState更新单个事件的值？我也很高兴看到它是如何在React之外完成的。
state = {events: [{
event1:{
name: 'Name 1',
id: 1,
},
},{
event2:{
name: 'Name 2',
id: 2,
},
},{
event3:{
name: 'Name 3',
id: 3,
},
}]}
浏览 14提问于2018-09-09得票数 0
import React, { Component } from "react";
import axios from "axios";
import ReactPlayer from "react-player";
export default class DoctorData extends Component {
state = {
sidebarOpen: true,
courseData: [],
renderData: []
};
componentDidMount() {
let jw
浏览 6提问于2019-10-31得票数 2
回答已采纳
我正在使用React的Material UI，无法获得要显示的子菜单。单击顶层菜单中的Browse即可关闭该菜单。将鼠标悬停在其上时按Enter键可执行相同的操作。按向右箭头键不起任何作用。 class TopNav extends React.Component {
state = {
anchorElement : null
};
handleClick = event => {
this.setState({ anchorElement : event.currentTarget })
};
handleClose = () => {
浏览 29提问于2019-03-03得票数 0
回答已采纳
1回答
我试图在我的节点应用程序中使用嵌套路由。最初，我在我的App.jsx中拥有了所有的路由，并且它工作得很好。我决定使用嵌套路由来更好地处理从子到父的数据。
当我设置嵌套路由时，页面会转到url，但我的组件没有呈现。我把路线放回我的App.jsx里，一切都很好。
我尝试过HashRouter而不是BrowserRouter，因为我的应用程序(目前)只呈现静态页面，但没有帮助。
我还使用了下面链接中引用的更新阻止程序，但是遗憾的是，它也不起作用。
请帮帮这个新手！
Index.jsx
import React, {Component} from 'react';
import {
浏览 0提问于2018-08-14得票数 0
我想要更改API返回的页码。因此，我使用API来获取电影，并使用react钩子来实现此目的。我使用useEffect创建了一个单独的函数来从API中获取数据，但我不知道如何使用react钩子来包含更改从API返回的页面的功能。
我不知道该如何做到这一点。
class ContactList extends React.Component {
state = {
contacts: [],
per: 2,
page: 1,
totalPages: null
}
componentWillMount() {
浏览 43提问于2019-04-08得票数 0
回答已采纳
1回答
我希望向HomeFeed组件呈现一些火基数据。我在componentDidMount方法中更新状态。你可以看到下面的样子。这是一个数组。我应该用map函数来映射它吗？我如何访问特定的信息，如“标题”，“链接”，“类型”等，以便能够呈现它？
非常感谢!
var React = require('react');
var Rebase = require('re-base');
var base = Rebase.createClass("https://nimbus-8ea70.firebaseio.com/");
// TODO: Render
浏览 2提问于2016-08-24得票数 0
回答已采纳
我已经通过了相关的线程链接，但没有解决我的问题，我理解这个问题是当我试图用对象来设置状态时，而不是使用数组。
我有一个siteProductTestContainer.js
import React from "react";
import api from "../networking/api";
import ProductList from "./components/ProductList";
class siteProductTestContainer extends React.Component {
state = {
浏览 0提问于2018-04-13得票数 0
回答已采纳
1回答
"react"："^16.4.1"，"react-dom"："^16.4.2"，"react-redux"："^5.0.7"，"redux"："^4.0.0"，"redux-thunk"："^2.3.0"，"webpack-dev-server"："^3.1.5“
const items = this.props.cart.cartItems;
const index = items.indexOf(item1)
浏览 1提问于2018-09-09得票数 1
我使用State，并将一个onChange侦听器放置在一个调用nameChangeHandler的输入组件上，我遇到了一个奇怪的突变问题。
这是我的状态目标：
state = {
persons: [
{ id: '363724', name: 'Person1', age: 28, job: 'React Developer' },
{ id: '724324', name: 'Person2', age: 49, job: 'General Manager' },
浏览 1提问于2018-09-16得票数 2
回答已采纳
1回答
在从api中获取数据并在网页上显示数据时，我遇到了问题。我得到了一个错误："items.map不是一个函数“。我不确定这是这个代码的问题，还是我在api中为get请求编写的代码，为了以防万一，我会同时发布这两个代码。
我将粘贴下面的代码，而不用链接到我的api。谢谢,
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [],
浏览 4提问于2021-12-26得票数 0
3回答
我正在尝试调用Unsplash，以便根据从道具中传递的位置字符串返回图像。
当我控制台日志this.state.props时，响应json对象就在那里。但是，当我试图从状态中获取图像urls并使用它们作为图像的源时，我总是会收到一个错误，上面写着“无法读取未定义的小属性”。
我是不是忽略了什么？
import React, {Component} from 'react';
import Unsplash, {toJson} from 'unsplash-js';
const unsplash = new Unsplash({
applicationI
浏览 0提问于2018-02-20得票数 2
回答已采纳
我使用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
回答已采纳
当我在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
回答已采纳
4回答
我有以下几点：
import React from 'react';
import Chart from './chart.jsx';
import Form from "./form.jsx";
import data from "./data.js";
class App extends React.Component {
constructor(props) {
super(props)
this.holdingArray = [];
this.state
浏览 0提问于2017-11-03得票数 1
回答已采纳
1回答
我遇到了一个奇怪的问题，我可以弄清楚为什么会发生。
这不应该发生，因为传递给History组件的道具还没有更新。
./components/History.js y.js
...
const History = ({ previousLevels }) => {
return (
<ScrollView style={styles.container}>
{previousLevels.reverse().map(({ date, stressValue, tirednessValue }) => {
retur
浏览 0提问于2018-07-28得票数 0
回答已采纳
我尝试使用Apexcharts将动态数据设置到我的饼图中，但我遇到了错误。 class ApexChartPie1 extends React.Component {
constructor(props) {
super(props);
this.state = {
series: this.state={
dataL : []
},
options: {
chart: {
width: 380,
type: 'p
浏览 24提问于2020-07-18得票数 4
我正在尝试将我在之后构建的节拍器转换为一个简单的React项目。我认为绘制节拍器的参数(节拍、音符分区等)非常容易。并对其进行扩展，以构建一个步序发生器(科技万岁！)。这就是说，我在写一篇文章时遇到了问题，我想知道为什么。
我在Metronome组件上获得了几乎所有重要的部分，如下所示：
import React from 'react'
class Metronome extends React.Component {
constructor (props) {
super(props)
this.audioContext = new (window.
浏览 0提问于2017-12-08得票数 0
我正在尝试将对象数组存储在本地存储中。我正在使用
localStorage.setItem( 'products', JSON.stringify(this.state.products) );
let initialProducts = JSON.parse(localStorage.getItem("products") || "[]")
我得到了一个错误：
SyntaxError: Unexpected token o in JSON at position 1
我知道这个错误意味着我要解析JSON两次，但是如果我不解析它，当我从local
浏览 3提问于2018-08-08得票数 1
回答已采纳
如何使用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上构建一个简单的todolist应用程序，我遇到了这个问题。我可以编写必要的代码将待办事项添加到状态中定义的列表中并显示它，但是当涉及到通过单击每个待办事项旁边的按钮从列表中删除项目时，除了第一个项目之外，所有的待办事项都会从列表中删除。我该怎么办呢。代码如下：
TodoList(父)组件：
import React, {Component} from 'react';
import AddTodos from './AddTodos';
import DisplayTodos from './DisplayTodos'
i
浏览 0提问于2020-04-29得票数 0
1回答
setState不更新数组
、、、、
我正在用reactjs创建一个todo应用程序，当用户单击输入时，我试图更新我的todo项目列表。当用户单击时，我可以更改该项，但该项不会在状态中得到更新。我不明白为什么状态不更新。我认为这与.map()和将todo对象返回到新数组有关，但我不太清楚出了什么问题。有什么想法吗？
App.js
import React from 'react'
import TodoItem from './components/TodoItem'
import TodosData from './TodosData'
import './App.scss
浏览 3提问于2021-03-11得票数 0
回答已采纳
3回答
我有如下的板条箱状态，在某个时候，我想要清除这个数组，并用新的数组更新。我使用下面的代码进行清除，但当我通过react-developer工具检查状态时，数组仍然在那里，什么也没有发生。作为我的新手，请帮助我到ReactJS。
state = {
formData:{
level:{
element:'select',
value:'Bachelors',
label:true,
labelTe
浏览 29提问于2019-07-26得票数 0
回答已采纳
5回答
我正在尝试为我的react应用程序编写路由器组件。我正在创建新react类，并在componentDidMount方法中定义一些路由。这是完整的方法
componentDidMount: function () {
var me = this;
router.get('/', function(req){
me.setState({
component: <MainPage />
});
});
router.get('/realty', function(
浏览 0提问于2015-04-18得票数 52
3回答
我是新手，当我创建一个项目时，我遇到了一个非常奇怪的事件，我的代码。它具有setState的异步特性，它不允许我按照我希望的那样在页面上呈现数据。我正在尝试将我已经在数据库中的文件显示到我的网页上。但是，由于状态是在一段时间后设置的，因此我无法使用map函数将文件呈现到屏幕上，因为当调用它时它是未定义的。
我实现了一个get方法，以便获得我想要显示的文件的json响应。但是当我挂载我的组件和文件的setstate时，它显示出它没有任何价值，我知道它是异步的，但是我不知道如何处理它，这样我就可以使用map在网页上显示。
我的代码如下：
import React, {Component} from
浏览 3提问于2020-07-30得票数 1
回答已采纳
我正在使用react-router-dom构建一个React应用程序，并从我的Django Rest Framework后端获取数据，一旦获取了数据，我导航到另一个链接，保存到window和内部保存状态的数据就会被删除。如何将这些数据持久化到客户端？
代码如下：
Router
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import AuthHeader from './authhe
浏览 0提问于2019-11-18得票数 1
我知道，在React类中，React组件使用"this“绑定到”跟踪“道具和状态。在钩子中，它是由于关闭而实现的，我怀疑吗？
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</butt
浏览 1提问于2022-07-02得票数 0
回答已采纳
我目前正在使用react-virtualized来呈现巨大的列表。当我调整大小并达到某个宽度时，滚动条会无限消失并重新出现，即使计算出的宽度保持不变。这可能是react-virtualized库中的错误，但我正在尝试寻找解决方法。这是我现在在我的渲染方法中所拥有的： // The onResize is what I am currently focusing on
<AutoSizer disableHeight onResize={this.setDimensions}>
{({ width }) => {
return (
浏览 45提问于2020-07-25得票数 1
我正在创建一个现场得分网站，将返回所有足球现场事件。我正在使用jquery发送请求，然后得到一个有补丁的对象响应--这包含一个所有活动事件的数组，最后是结果--这将计算事件的数量(21)；我很难映射这些数据，以便在我的应用程序上显示它--附加的是响应的图像。
import React from 'react';
import jQuery from 'jquery';
class Home extends React.Component {
constructor(props) {
super(props);
this.state =
浏览 3提问于2019-09-21得票数 1
回答已采纳
如何将数组数据循环显示到网页中，无法显示控制台中提供的对象数据
import React from 'react';
//const api = "https://reactnd-books-api.udacity.com";
class CurrentBook extends React.Component {
constructor(){
super()
this.state={
books: [],
};
}
render() {
fetch('https://reactnd-
浏览 0提问于2017-08-05得票数 0
2回答
问题:
如果每个组件都有自己的状态，那么这件事是如何发生的呢？
这里是我的应用程序的完整代码：
import React, { Component } from 'react';
import { render } from 'react-dom';
import AutoComplete from 'material-ui/AutoComplete';
import Chip from 'material-ui/Chip';
import Hello from './Hello';
import './
浏览 0提问于2017-10-11得票数 3
回答已采纳
在通过从API获取的数据更新状态之后，我在呈现图表时遇到了问题。
import React, { Component } from 'react';
import { Bar, Line, Pie } from 'react-chartjs-2';
export default class PopChart extends Component {
constructor(props) {
super(props);
this.state = {
chartData: {
labels: [],
浏览 7提问于2020-02-13得票数 0
1回答
我试图添加多个标记到我的谷歌地图，但我不知道如何开始，因为我是新的反应。我想要创建一个标记数组，并将它们全部呈现到地图上。我该怎么做？
目前为止的代码：
import React, { Component } from 'react';
import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';
const mapStyles = {
width: '100%',
height: '100%'
};
export clas
浏览 1提问于2020-06-16得票数 0
回答已采纳
1回答
我搞不懂如何通过React中的钩子使用setState将数组数据添加到对象内的数组列表中。有人能帮我一下吗？下面是我的代码，每次我通过控制台登录总是返回空数组。 import React, { useState } from 'react';
const Main = props => {
const [state, setState] = useState({
noteArray: [],
noteText: '',
});
const addNote = () => {
if(state.noteTex
浏览 52提问于2019-04-14得票数 0
回答已采纳
我正在测试一些代码，以尝试和理解关于使用race condition的setState()。
我的代码可以找到
我的代码如下：
import React from "react";
export default class App extends React.Component {
state = {
id: "",
ids: [{ id: 7 }, { id: 14 }]
};
// here is where I create the id numbers
uniqueIdCreatorHandler = incremen
浏览 0提问于2020-02-19得票数 0
回答已采纳
2回答
import React, { Component } from 'react'
import { Menu } from 'semantic-ui-react'
export default class MenuExampleVerticalPointing extends Component {
state = { activeItem: 'home' }
handleItemClick = (e, { name }) => this.setState({ activeItem: name })
render() {
浏览 2提问于2018-05-29得票数 1
回答已采纳
我有一个博客组件，在他里面有一个搜索组件。我需要访问我的博客组件中的searchResults变量。如何将其从搜索组件传递到博客组件？
下面是父组件(博客组件)：
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Pagination from "react-pagination-js";
import Spinner from '../Spinner/Spinner';
import { Link } fro
浏览 0提问于2020-08-14得票数 0
2回答
呈现无序的组件
、、
我使用React & _underscorejs从JSON对象数组中筛选单个数据元素，并将其呈现到表中的屏幕上。我的代码将呈现过滤后的数据，但几秒钟后整个表也会呈现出来。
this.state = { stats:[],
value:'';
componentDidMount() {
fetch('http://localhost:5000/cityStats')
.then((data) => data.json())
.then((data) => this.setState( { stats: data }
浏览 0提问于2019-05-08得票数 0
回答已采纳
我一直在学习如何做出反应，早些时候我只是用axios调用componentDidMount中的api --它工作得很好。
现在，这个任务没有从api获得数据，因此我在componentDidMOunt中通常称为setState，但是由于setState是异步的，所以当我需要它时，它没有被更新。
我想知道我应该如何写这个，以减轻这个问题。下面是一个简单的类代码。
import React from 'react'
import CarCapacity from '../Components/TextBox/CarCapacity'
import rando
浏览 0提问于2019-05-12得票数 0
回答已采纳
我试图用一个currentTodo和一个pastTodos数组构建一个简单的Todo应用程序。
我无法使用这里的代码将currentTodo推到pastTodo。
handleClick(e) {
e.preventDefault();
let pastTodos = this.state.pastTodos;
pastTodos.push(this.state.currentTodo);
this.setState({ pastTodos: pastTodos, currentTodo: "" });
}
只有改变这一行才能做到
let
浏览 4提问于2022-07-13得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
