为什么在React中映射的项状态会相互影响？
在React中，映射的项状态会相互影响的原因是因为React中的映射操作是基于数组的索引进行的。当我们使用数组的索引作为映射的key时，如果数组中的项发生了变化，例如插入、删除或者移动位置，React会根据索引来更新对应的映射项。
这种更新方式可能会导致一些问题，特别是在涉及到状态的更新时。当我们在映射中的某一项状态发生变化时，React会根据索引来更新对应的映射项，这可能会导致其他项的状态也发生变化，因为它们共享相同的索引。
为了解决这个问题，我们可以使用唯一的标识符作为映射的key，而不是使用数组的索引。这样做可以确保每个映射项都有一个唯一的标识符，即使数组的顺序发生变化，React也能正确地更新对应的映射项。
在React中，我们可以使用库如uuid来生成唯一的标识符。具体实现时，我们可以将唯一标识符作为映射的key，并将其与映射项的状态关联起来。这样，即使映射项的位置发生变化，React也能正确地更新对应的映射项状态，而不会相互影响。
总结起来，映射的项状态会相互影响是因为React基于数组的索引进行映射操作。为了避免这个问题，我们应该使用唯一的标识符作为映射的key，而不是使用数组的索引。这样可以确保每个映射项都有一个唯一的标识符，从而避免相互影响的问题。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：高性能、可扩展的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：安全、稳定、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
相关·内容
1回答
为什么在React中映射的项状态会相互影响？
reactjs
我映射了一个产品数组，每个产品都有，我在用redux管理状态，每个映射的项目都有数量，如果我增加了数量，价格也应该增加，所以当我改变一个项目的数量时，第二个项目的价格也会根据之前的项目数量发生变化，那么为什么不同的项目会相互影响呢
浏览 16提问于2021-09-26得票数 0
1回答
在React 50状态图中获取全州名而不是缩写
reactjs
我将这个项目用于react映射：这里是一个活生生的例子：alert(event.target.dataset.name);对于这个事件处理程序，我想通知完整的状态名称，而不是abbreviation.In我的实际项目，我将根据用户单击的内容设置状态，并使用该状态动态筛选网格。问题是网格中</em
浏览 2提问于2022-08-10得票数 0
回答已采纳
1回答
为什么其中一个工作，而不是另一个-提取和useState - react/JS。
javascript、arrays、reactjs、object、fetch
，我在找一个解释为什么下面的不起作用import { useState, useEffect } from "react";
export default当我在获取请求之外创建一个对象的本地数组时，我可以使用setState轻松地将保存数组的变量放在状态中，而无需将键(来自我的对象数组)放入状态
浏览 3提问于2022-05-05得票数 -2
2回答
无法读取未定义映射的属性
javascript、arrays、reactjs、react-native、api
import React from 'react';import { constructor(props) { </Card>
浏览 1提问于2021-12-30得票数 0
回答已采纳
2回答
如果在react中使用redux，那么设置初始状态的最佳实践是什么？
javascript、reactjs、ecmascript-6、redux
我有这段代码，我有点搞不懂什么是设置初始状态的最佳实践。
浏览 5提问于2017-02-21得票数 0
回答已采纳
2回答
订阅状态- Redux
reactjs、redux、react-redux、subscribe、redux-store
我试图显示一些总是被更新的数据，但是当我添加一些要存储的新数据时，屏幕上看不到新的数据，因为我不知道订阅存储方法。但是我不知道在哪里使用它，也不知道如何使用它。我找不到适合我的项目的例子。第一种使用的可能性，就像我在上面搜索一样，(像mapStateToProps一样使用它)； return {还是应该在state.header.templatesList应用程序中订阅？这是我的商店
浏览 2提问于2017-06-14得票数 0
回答已采纳
1回答
React中数组的条件呈现: For vs Map
javascript、reactjs
我对React和构建日历应用程序是个新手。在尝试更好地理解状态时，我注意到我的“移除预订”功能需要一个状态更新才能工作，而我的“添加预订”功能在没有状态的情况下工作得很好。删除预订:需要状态为work 添加预订:不需要状态即可工作 我认为这是因为我的时隙组件的呈现方式。每个插槽都是通过.map()从数组的一项中呈现的</
浏览 25提问于2021-02-28得票数 0
回答已采纳
1回答
ReactJS组件列表
javascript、reactjs
我是JS和ReactJS的新手。我试图按以下方式实现一个框列表：import ".和-按钮时，我希望列表的前面将被修改。但是，不管我把索引设置为什么数字，它总是在列表的尾部操作.编辑1:好的，这似乎是关键的问题。R
浏览 1提问于2022-10-24得票数 1
回答已采纳
2回答
在状态更新时不对元素进行排序
javascript、reactjs
当使用react状态更新数组时，值会发生变化，但它不会重新排序从数组映射出来的react元素。在这个代码片段中，初始状态是[1, 3, 2]，然后映射到另一个数组，然后像[1, 4, 9]一样排序和显示。当我将2添加到数组的最后一个元素时，列表值将更改为列表中的[1, 16, 9]，但排序不会改变。有人能解释一下它为什么会这样吗？const TestObject
浏览 6提问于2022-09-22得票数 0
回答已采纳
2回答
android输入字段相互影响
android、android-edittext、oncheckedchanged
在Android中，我在同一个视图中有多个表单小部件，我希望它们能相互影响。现在，我有一个EditText字段，您可以在其中键入一个整数，并且我希望在一系列ToggleButtons中显示该值(即，EditText字段的二进制值显示为选中的按钮)。我希望这两个字段相互影响，因此单击按钮会更改文本，而更改文本会更改按钮。
现在，我正在使用afterTextChanged()方法来捕获更新后的文本并更改
浏览 5提问于2014-10-11得票数 0
1回答
仅更改React中状态ş的一个属性
reactjs、state、react-state
我只想改变状态中的一项，在React中有两项。下面是代码。setGenderFilter=(event)=>{{ gender:event.target.value
})) } 我使用这个状态来获取但当我更改其中一个值时，另一个值变得未定义，但它必须是先前的值。所以fetch被破坏了。我不明白为什么会<
浏览 9提问于2021-07-15得票数 0
5回答
为什么处于反应性状态的数组的pop()或push()方法可以工作
javascript、reactjs
然而，items.pop();我只是不知道如果有一个由dom呈现的列表(比如<divclassName="list">{this.state.items}</div>)，为什么仍然可以更新this.state.items。我感到困惑的是，items.pop()已经更改了原始状态，下一个状态的项不等于原始
浏览 0提问于2018-09-18得票数 4
回答已采纳
1回答
反作用地图GL:打开检查后地图不占宽度和高度
javascript、reactjs、react-map-gl
在我的react应用程序中，我使用react映射gl来呈现地图。但是，从react map-gl呈现的映射在打开检查后没有获取宽度，有时在缩小窗口后没有恢复到正常状态。这是我的视口设置， height: '100vh', zo
浏览 12提问于2022-01-14得票数 0
1回答
setLoading(true); }因此，如果sortData状态更改，将执行包含两个控制台的{.}。因为sortData和[]相同，所以sortData状态不会改变，所以它不应该运行这个useEffect，不是吗？为什么会这样？详细说明
我已经创建了下面的代码来执行相互影响的us
浏览 1提问于2022-10-17得票数 0
2回答
使用钩子和useState访问数组
arrays、reactjs、react-hooks、jsx
我有以下代码： person: [ { name: 'Manu', age: 29 }, ],});persons = ( {personsState.person.map(
浏览 1提问于2020-09-18得票数 0
1回答
fat箭头函数的破坏和返回结果
reactjs、ecmascript-6、redux
考虑一个React & Redux环境，其中组件接收某种状态。state.experiences,})) ...我一直在设法减少传递给连接的状态映射函数的大小为什么我们有一个扩展和rest操作符，但却无法减少这种冗余映射？类似于以下例子之一：
@connect(
浏览 1提问于2018-05-09得票数 0
回答已采纳
3回答
如何跟踪redux商店中的更改？
reactjs、redux、react-redux
我只想同步存储状态和组件的状态。SignleCartItem -有一个组件CartItems，它通过使用map函数将道具传递给SingleCartItem组件来显示SingleCartItem。每当用户更新数量时，SignleCartItem就会分发一个操作并存储，保存添加到购物车中的总项目及其价格。现在的问题是，显示购物车项的SubTotal和道达尔的组件不能将存储状态与其状态(显示总计)同步。
浏览 9提问于2016-10-17得票数 1
回答已采纳
3回答
当onEndReached调用时，React本机(Redux) FlatList跳到列表顶部
react-native、redux、react-native-flatlist
我在ReactNative中有一个FlatList，它从一个API中拉出一个文章列表。当滚动到列表末尾时，会从API中拉出另一个文章页面，并将其附加到Redux reducer中的文章列表中。文章”状态对象使用React Redux连接函数映射到组件。相关的reducer (为简洁起见，删除了一些项)如下所示：
/// Initial 'ar
浏览 4提问于2018-10-04得票数 11
2回答
反转存储在状态中的数组并不会迫使组件在响应中重新呈现。
javascript、reactjs、react-hooks、react-state
这是一个更大的组件的一部分，但我在下面的一个可重复的示例中对其进行了总结： function App，映射的数据似乎不会随着状态更新而改变。作为状态更新的检查，我有一个清除按钮，它清除数据状态，列表变为空。
当我点击反向按钮时，我期望数据被反转(即“第一”是最后
浏览 2提问于2021-01-12得票数 1
回答已采纳
1回答
如何强制一个react组件不重新呈现？
reactjs、react-redux、openlayers
我有一个主react组件(整个页面)，其中包含其他几个UI项。其中一个UI项是OpenLayers映射。另一个组件是一个文本字段，其中包含当前鼠标指针位置的纬度和经度。我希望每当鼠标指针在地图上移动时，文本字段都会更新。在我的代码的当前状态下，这是可行的。 问题是，每次鼠标移动时，我都会更新纬度/经度的react状态值(在文本字段<em
浏览 30提问于2021-07-13得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
