处于React状态的数组不会映射
是指在React组件中使用状态管理库（如React的useState或Redux）来存储数组数据时，对数组进行操作（如添加、删除、修改元素）并不会直接改变原始数组，而是创建一个新的数组副本进行操作。
这种设计是为了遵循React的不可变性原则，即组件的状态应该是不可变的。React通过比较前后状态的差异来确定是否需要重新渲染组件，如果直接修改原始数组，React无法检测到状态的变化，导致无法正确更新组件。
为了解决这个问题，可以使用数组的一些不可变操作方法来创建新的数组副本，例如concat、slice、map、filter等。这些方法会返回一个新的数组，而不会修改原始数组。然后将新的数组作为新的状态进行更新，从而触发组件的重新渲染。
对于React状态中的数组，可以使用以下方法进行操作：
- 添加元素：使用concat方法将新元素添加到数组末尾，或使用展开运算符（...）创建一个新数组并添加元素。
- 删除元素：使用filter方法创建一个新数组，排除需要删除的元素。
- 修改元素：使用map方法创建一个新数组，对需要修改的元素进行更新。
- 获取数组长度：使用length属性获取数组的长度。
- 遍历数组：使用map方法遍历数组，并对每个元素进行操作。
腾讯云提供了多个与React开发相关的产品和服务，包括：
- 云服务器（CVM）：提供可扩展的计算资源，用于部署和运行React应用程序。链接：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版（CDB）：提供高可用、可扩展的MySQL数据库服务，用于存储React应用程序的数据。链接：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：提供安全、可靠的对象存储服务，用于存储React应用程序中的静态资源（如图片、视频等）。链接：https://cloud.tencent.com/product/cos
- 云函数（SCF）：提供无服务器的函数计算服务，用于编写和运行React应用程序的后端逻辑。链接：https://cloud.tencent.com/product/scf
- 云监控（Cloud Monitor）：提供实时监控和告警服务，用于监控React应用程序的性能和可用性。链接：https://cloud.tencent.com/product/monitor
请注意，以上链接仅供参考，具体产品和服务选择应根据实际需求进行评估和决策。
相关·内容
3回答
我对状态进行了如下设置： super(); isLoggedIn: false,
loginShowing: false如果我将asdf: '123'置于状态，然后打印<h1> {this.state.asdf} </h1>，它确实可以工作。有人知道为什么从状态中的数组映射不能呈现吗？谢谢。我使用react ^15.6.1在macO
浏览 3提问于2017-08-18得票数 1
能够在React类组件上使用shouldComponentUpdate的好处之一是能够根据条件控制渲染，而不仅仅是状态/prop值的更改。 在函数组件中使用react钩子进行优化的首选方法是什么？在下面的示例中，如果类组件处于关闭状态(或处于关闭状态)，即使它有新的子级，它也不会重新呈现。class DrawerComponent extends <em
浏览 16提问于2019-03-14得票数 0
回答已采纳
2回答
如何将状态数组传递给道具
、、、
所以我有两个React文件，一个App.js和一个category.js。当我将数组传输到category.js时，它会显示一个巨大的文本块，而不是将其分割成不同的数组按钮。这是类应用程序Object.keys(data.categories).forEach((category,index) =>return ( <Categories
categoryN
浏览 2提问于2018-10-11得票数 0
回答已采纳
2回答
当使用react状态更新数组时，值会发生变化，但它不会重新排序从数组映射出来的react元素。在这个代码片段中，初始状态是[1, 3, 2]，然后映射到另一个数组，然后像[1, 4, 9]一样排序和显示。当我将2添加到数组的最后一个元素时，列表值将更改为列表中的[1, 16, 9]，但排序不会改变。有人能解释一下它为什么会这样吗
浏览 6提问于2022-09-22得票数 0
回答已采纳
我使用Axios来获取DeezerAPI，所以首先我使用.map()来呈现信息，在访问信息并将其传递给组件时一切都很好，但是当我试图访问一个JSON对象时，我会得到一个“未定义的”错误。Axios请求React.js示例//No problem with Redux
const apiData = useSelector((state) => state.dataTypeError: Cannot read properties of undefined (reading
浏览 7提问于2022-04-16得票数 0
我的react本机项目的一部分是我创建的网格。当用户单击网格中的项时，我希望更新我在状态const [selectedHomeTypes, setSelectedHomeTypes] = useState(['Houses'])中设置的数组。当我将一个项目添加到数组中时，我希望它能够编辑网格，以便数组中的所有项目都有一个蓝色的背景。如果selectedHomeTypes中有1项，
浏览 3提问于2022-09-02得票数 0
回答已采纳
有人能告诉我为什么这个“向上投票”的onClick处理程序会被解雇两次吗？日志显示它只运行了一次，但是它控制的分数增加了2 constructor(props) {
浏览 3提问于2020-12-07得票数 0
回答已采纳
1回答
我正在构建一个多步骤的东西，但是这些步骤是动态的，并且是基于来自params的一些条件构建的。在构建过程中，我注意到子组件在更新父组件中的状态后不会刷新，这是因为它们的声明/生成方式(在返回一系列步骤的函数中)。
我一直在试图找出解决这个问题的简单方法。另外，如果我将数组创建移动到返回中，它就会工作，但随后我将失去对数组变量的访问，在该变量中，需要长度来
浏览 5提问于2022-10-28得票数 0
回答已采纳
在库规范下，"react-native": "0.63.4",
当app处于后台状态时，会收到推送通知，但不会弹出屏幕app处于后台状态时，需要做哪些设置来提醒推送。
浏览 0提问于2021-01-22得票数 1
GET_MEMBERS_ERROR': default: }
} 然而，我的理解是JSX中的成员列表不会更新。 是不是误解了我？ 请帮帮忙，给我提个建议。
浏览 14提问于2019-12-25得票数 0
回答已采纳
在使用useContext时，面对多个呈现问题，这里有代码示例和打印，显示每次使用上下文时的多个日志，并且我试图理解多重呈现的概念和原因，一种可能是使用useEffect来创建类似“didMount”之类的东西// react// components
import Header from '../..i
浏览 2提问于2022-09-05得票数 0
回答已采纳
我正在使用React，并希望更新处于某个状态的对象数组。({elements: newState});render() { <div>
{map(this.state.elements, (el, index) => <Component key={`el-
浏览 9提问于2017-12-13得票数 1
回答已采纳
return () => { }; // eslint-disable-next-line react-hooks/exhaustive-deps );
} 在我的组件中： const MyComponent = (props: Props但是，FlatList不会重新呈现，就像数据没有更改一样。 我使用了之前<em
浏览 13提问于2019-04-18得票数 5
我正在制作一个小的React应用程序来跟踪家庭作业。您应该能够添加多个日期，并在这些日期内添加多个工作分配。我可以将日期打印到屏幕上，也可以打印出一天内的多个作业。但是，在添加另一个日期后，存储所有先前日期中的分配的本地状态将被清除，因此每个日期的分配将消失。所有日期仍然显示在屏幕上，但其中的分配不再存在，也不再处于状态。如何在添加新日期时使工作分配保持在屏幕上并保持状态？这是需要本地存储的
浏览 24提问于2021-10-26得票数 1
回答已采纳
因此，当我试图循环或映射当前处于我状态的对象时，我得到了TypeError: products.map is not a function错误。我从API获取产品，并将它们放入我的状态，然后尝试显示处于我状态的对象。HomeScreen.jsimport { Card } from '
浏览 0提问于2021-03-18得票数 0
2回答
我有一个名为Np02的react钩子，它显示通过文件输入选择的照片，并将它们保存到状态。当用户选择文件时，这些文件以网格的形式显示给用户。这是有效的，但有功能，我想删除选定的图像，这不是。函数removeImage运行，输出我期望的数组，但是状态不会改变。我已经尝试将setImages移到函数removeImages或其他地方，但状态本身不会改变，当我在图像上添加
浏览 10提问于2020-09-28得票数 1
回答已采纳
请参考
我在删除通过函数呈现的组件时遇到了问题。由于组件不应该存储在状态中，所以我将它们的类型存储在处于父组件状态的数组中。函数遍历该数组以呈现组件。当我尝试按索引删除特定组件时，React不会更新我希望保留的组件中的支持项(索引)(即:将索引2处的组件向下更改为索引1)。相反，它在该索引处呈现组件。我的Codesandbox示例演示了此行为。如
浏览 5提问于2021-04-08得票数 1
回答已采纳
假设我有一个UI，它有两个控件:日期选择器(映射到状态date)和下拉(映射到状态filter)。const {date, filter} = state;
const fetchData = async () => {
浏览 5提问于2021-04-10得票数 1
我在父组件中存储一个数组，并将其传递给子组件来呈现，以及一个允许子组件通过更新数组状态来修改和重新呈现的函数。
浏览 3提问于2022-05-24得票数 1
我有一个数组posts和一个单独的数组favourites。我希望UI显示“热门:是或否”，这取决于favourites是否包含来自posts的值。问题是当我将UI添加到favourites中时，UI永远不会更新。imp
浏览 15提问于2022-01-08得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
