在setState内使用for循环中的索引
在React中，setState是用于更新组件状态的方法。在使用setState时，如果需要在for循环中使用索引，需要注意一些问题。
首先，需要理解setState是一个异步操作。这意味着在for循环中直接使用索引可能会导致意外的结果。因为在循环中，setState可能还没有完成，而索引已经发生了变化。为了解决这个问题，可以使用JavaScript的闭包来保存每次循环的索引值。
以下是一个示例代码：
for (let i = 0; i < length; i++) {
(function (index) {
// 在闭包中使用索引
setState((prevState) => {
// 使用prevState来更新状态
// 例如，将索引值添加到状态数组中
return {
data: [...prevState.data, index],
};
});
})(i);
}在上述代码中，通过使用立即执行函数创建了一个闭包，将每次循环的索引值作为参数传递给闭包函数。这样，在闭包函数内部就可以安全地使用索引值，并且不会受到循环的影响。
另外，需要注意的是，使用for循环中的索引更新状态可能会导致性能问题，特别是在循环次数较大的情况下。因为每次调用setState都会触发组件重新渲染，频繁的重新渲染可能会影响性能。如果可能的话，可以考虑使用其他方式来解决问题，例如使用map函数来生成新的状态数组。
总结起来，当在setState内使用for循环中的索引时，需要注意以下几点：
- 使用闭包来保存每次循环的索引值，以避免异步操作导致的问题。
- 谨慎使用循环中的索引更新状态，考虑性能问题。
- 在更新状态时，使用prevState来确保状态更新的正确性。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：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
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯区块链服务（TBCS）：https://cloud.tencent.com/product/tbcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
我看到了其他答案，它们通过在列表视图中添加项目计数解决了问题，但我仍然收到了这个错误。对于添加图像的相同代码，我不会得到这个错误。在这篇文章中，我使用图像选择器将视频上传到列表中，并将其呈现在listview中，然后上传到firebase。
Add_video_screen：
class _addVideoState extends State<addVideo> {
bool uploading = false;
double val = 0;
CollectionReference? vidRef;
firebase_storage.Reference? ref
浏览 1提问于2022-02-06得票数 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
对ABAP来说很新鲜。我有一个类“卡车”("vrachtwagen")，它有一个表属性it_pakket (卡车中的包)。我已经编写了一个方法，将这个表的内容写入屏幕(DisplayLading)。我想对每辆卡车都这样做，所以我把这个方法叫做for -循环。程序运行时没有错误，但是输出没有显示在屏幕上。
REPORT ZPR412_OO_OEF1.
CLASS CPakket DEFINITION.
PUBLIC SECTION.
DATA: Id TYPE I READ-ONLY,
aantal TYPE I,
浏览 2提问于2017-10-04得票数 0
回答已采纳
我有一个要从state中删除的选定值的数组。但我面临着一些问题，当我的函数被调用时，它会更新状态，在下一次删除时，它会删除错误的选定值。
我尝试使用react setState回调，但没有成功。
setState(updater, [callback])
代码-
removeItem = itemIndex => {
this.state.todoItems.splice(itemIndex, 1);
this.setState({ todoItems: this.state.todoItems });
};
onSelectedDelete = itemInd
浏览 4提问于2020-10-29得票数 2
我正在尝试创建一个二进制字符串数组，每个二进制字符串正好有16位长。
我声明了一个空字符串数组，每个元素最多容纳20个字符：
bin_array = np.empty(len(dat_array), dtype="S20")
然后，我使用这个循环分配每个元素：
for i in range(len(dat_array)):
binary = bin(dat_array[i])
if len(binary) < 18:
number_of_zeros = 18 - len(binary)
zeros = ""
for i in ran
浏览 4提问于2015-08-05得票数 0
回答已采纳
for(i=0; i< 3; i++){
DescriptionInfoDTO description = new DescriptionInfoDTO();
description.setLanguage("English");
description.setName("anu");
description.setState("Kerala");
descriptionInfoList.add(description);
浏览 8提问于2015-04-14得票数 1
回答已采纳
我试图通过传递索引来设置setState({ index : index })的新状态，但是我得到了以下错误
"Uncaught :无法读取属性‘映射’的未定义“--我使用的是react，而且我使用的是箭头函数，我不太明白发生了什么.
关于如何解决这个问题，有什么建议吗？
import { useState } from "react";
import "./App.css";
const App = () => {
const [state, setState] = useState({
products: [
浏览 5提问于2021-01-07得票数 1
回答已采纳
2回答
因为setState是异步工作的，所以它不会立即更新状态。如何更新循环中的状态变量。 其功能是验证多个字段，并存储字段值对于特定行索引是否有效。但是，由于状态更改不会立即反映，因此我没有收到所需的输出。 请建议最好的处理方法。
浏览 9提问于2020-04-05得票数 4
回答已采纳
我正在尝试使用Handlebars.js从JSON访问内部对象。我试过了，但我没有得到具有面积值的address对象。
以下是我的HTML：
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<td>Address</td>
<
浏览 2提问于2017-09-21得票数 1
回答已采纳
我在本地主机上安装了solr。
我开始了标准solr云示例的嵌入式zookeepr。
集合: gettingstarted碎片:2复制:2
500记录/文档处理时间需要115个秒级的本地主机测试--为什么这需要这么长时间来处理500个记录。有没有办法把这个改进成毫微秒/纳米？
注意：
我在远程机器solr实例上进行了测试，本地主机在java内的远程solr上有数据索引。
我开始我的solr myCloudData集合与集成与单一的动物园。
2 solr节点，1集成动物园管理员独立
集合: myCloudData，碎片: 2，复制:2
Solr colud java代码
package com.
浏览 3提问于2016-06-23得票数 2
回答已采纳
4回答
如何将状态设置为响应中的对象数组
、、、、
我正在做一个闪存卡反应应用程序。我已经将我的状态初始化为一个对象数组(用户一次只能添加10个术语/定义，限制在10个)如下：
state = {
allTerms: [
{
term: '',
def: ''
},
{
term: '',
def: ''
},
{
term: '',
浏览 7提问于2020-05-23得票数 1
回答已采纳
1回答
嗨，我在学习反作用力的路上，现在我在循环中遇到了模的困难。
我的问题是，我的模式没有表现出来。
以下是我的当前代码：
state = {
modal: false,
modal_backdrop: false,
modal_nested_parent: false,
modal_nested: false,
backdrop: true,
};
toggle = modalType => () => {
if (!modalType) {
console.log(this.state.modal);
浏览 2提问于2018-04-29得票数 0
回答已采纳
我正在检查一个产品id是否已经存在于内存中，所以我只更新了它的数量，我的数据是一个类似于[{ id: data.id, price: data.price, qty: 1 }]的数组 我的代码是这个函数 storeProduct = async (data) => {
this.setState({ found: null })
try {
const value = await AsyncStorage.getItem('cart')
if (value !== null) {
var products = JS
浏览 8提问于2020-06-23得票数 1
回答已采纳
我试图允许用户按下一个按钮来呈现新的组件，每个组件都接收数据。这是我到目前为止掌握的代码：
class Example extends Component {
constructor(props) {
super(props);
this.state = { text: '', number: '', events: []};
}
onClick(){
//to implement
}
numberOnChange(value) {
this.setState({ number: value });
}
浏览 5提问于2020-09-02得票数 0
回答已采纳
我枚举rawdata并将值添加到dedque dex
for index, track in enumerate(rawdata):
while index < 49:
dex.append(track[0])
浏览 2提问于2018-01-11得票数 0
回答已采纳
1回答
Mysql左联接不使用外键
、、、、
我在执行一个简单的左联接时遇到问题。
当我运行EXPLAIN SELECT * FROM Feature f LEFT JOIN feature_translations t ON f.id = t.object_id时，我得到了以下结果：
+----+-------------+-------+------+---------------------------+------+---------+------+--------+----------------------------------------------------+
| id | select_type | table |
浏览 5提问于2015-11-17得票数 2
回答已采纳
1回答
我有antd表，我将尝试只更新一个子表，以便在api返回后添加一行。
如果子表为空，则为空它在表上显示的行，如果子表有一行及多个表子表，则不会更改。如果我单击expandedRowRender来排序它在那里显示的新数据，那么问题就是。
但是我不能创建一个表来添加新的行。当我为数据打印新状态时--它是ok的--我可以在那里看到新的行，但是表是相同的。有什么想法吗？我不确定问题是setState还是其他我做错了什么。
for (const property in dataGroup) {
if (dataGroup[property].id === new.group_id) {
da
浏览 1提问于2021-03-27得票数 0
我正在尝试使用整数数组来添加2个多项式。例如，co1 = {5，3，2，0，0，0，0，...} & ex1 = {6，2，1，0，0，0，...}表示多项式5x^6 + 3x^2 + 2x。我试过用不同的方法来做这件事，但是每当我尝试使用这个函数的时候，我都会收到消息"Abort trap: 6“。任何帮助都将不胜感激。谢谢。
void add_polynom( int co1[ ], int ex1[ ], int co2[ ], int ex2[ ] )
{
int tmpC[ASIZE]; //ASIZE = 50
int tmpE[ASIZE];
浏览 0提问于2020-03-06得票数 0
2回答
对象问题数组的设置状态
、、、
我对Reactjs很陌生，我正在学习使用setState方法更改状态属性。关于reactjs中的状态变化，我几乎没有什么问题。
我正在构建一个天气网络，使用开放的气象API作为教育目的。我在状态内保存一些属性，以便将它们作为道具传递给其他组件。国家如下：
export default class App extends Component {
state ={
error: null,
temperature: null,
WeatherName: null,
isLoaded: false,
Weather5day
浏览 1提问于2018-08-21得票数 0
回答已采纳
我是新来的反应--土生土长，我一直困在一个问题上。我有注册页面，其中有两个部分，第一部分是家长注册，第二部分是学生注册。因此，如果家长想要删除任何子窗体或子块，则家长可以按照requirement.now添加任何子窗体或子窗体，但当我绑定foreach循环中的“删除”按钮单击事件时，每次单击“删除”按钮时，所有按钮的参数值都保持相同的.so。
这里是我的代码
export default class SignUp extends React.Component {
constructor() {
super()
{
}
this.index = 1;
浏览 0提问于2019-02-21得票数 1
回答已采纳
我正在做一个字符串扩展，以查找一个字符在字符串中可能出现的多个位置。这是我的密码：
let letter: Character = "l"
extension String {
func checkLetter(letter: Character) {
if let index = self.rangeOfString(AString: String(letter), range: Range<Int>(start: 2, end: 5) ) {
print(index)
}
}
}
我只是
浏览 4提问于2015-12-04得票数 0
回答已采纳
我有以下函数 compareProducts = (empresa) => {
console.log(empresa.listaProductos)
let headerSetIn = false;
for (let i in empresa.listaProductos) {
//case1 : lookup for some data in an array, if found, setState and exit the whole function
if (pFichaInternacional && pFic
浏览 12提问于2021-04-27得票数 0
我试图通过CSV文件返回一个范围内的精灵宝可梦，使用最小值和最大值，所以我想把数字改成整数。到目前为止，如果我不将输入作为整数，我只能返回一个确切的Pokemon。我的CSV有801行长，poke是它们的编号，poke1是它们的名字。 def number(list):
newlist = []
x = 0
q2 = int(input("Minimum number? "))
q3 = int(input("Maximum number? "))
for poke in range(1,800):
poke[0] = int(po
浏览 8提问于2021-02-09得票数 0
我在3个不同的文件中列出了很多这样做的代码，所以我将给你一些我认为对理解这个问题至关重要的东西。
我有我的状态
state = { items: [], currentItem: {text:'', key:'', checked: false, textStrike: null}};
当我尝试setState一个函数时，console.log不会显示更新的信息。
completeItem = (item) => {
let itemsArr = [...this.state.items];
itemsArr.forEach((oneItem)
浏览 1提问于2019-03-15得票数 1
对于Population.cpp中的2D动态整数链接列表，我有以下声明：
sectionProf = new int*[section_count]; //list of professor for each section declaration
它在人口中的定义是：
int ** sectionProf; //list of professor for each section
然后从这样的文件(同样在Population.cpp中)填充它，稍后：
sectionProf[section] = new int[professors + 1];
sectionProf[section][0]
浏览 1提问于2015-02-16得票数 2
回答已采纳
我试图调用一个函数check_empty_cell，它是声明的，如下所示：
check_empty_cell(col_index, row_index) {
var filled_cols = this.find_filled_cols();
var filled_rows = this.find_filled_rows();
if (filled_cols.includes(col_index) && filled_rows.includes(row_index)) {
this.setStat
浏览 0提问于2021-05-04得票数 0
我正在使用一个for循环来遍历API中的类别，它的工作方式与预期一致： renderFilter=()=> {
const items = [];
for (item of this.state.newsCats) {
items.push(
<TouchableOpacity key={item.module_cat_id} onPress={()=>this.FilterRequest(item.module_cat_id)}><Text style={styles.filterCat}>{item.module_cat} {ite
浏览 16提问于2020-01-28得票数 1
回答已采纳
1回答
我从Python开始，我有一个"for“循环的基本问题，我有两个数组，其中包含一个相同变量的值：
A = data_lac[:,0]
在第一个数组中，我有面积值，在第二个数组中，有平均深度值。我想找到一种方法，用不同的参数值自动计算。方程式如下：
g= (np.sqrt(A/pi))/n
在这里，我可以计算每一行的"g“。现在我想要一个不同值为"n“的循环。我做了这个：
i=0
while i <= len(A)-1:
for n in range(2,6):
g[i] = (np.sqrt(A[i]/p
浏览 0提问于2018-07-17得票数 1
回答已采纳
1回答
我无法弄清楚如何继续处理以下数据绑定。我有JSON数据，希望以垂直网格的形式显示。因此，我将获取一个数组(例如columnName)中的所有键值，并使用它来显示列名。现在，我试图使用数组(ColumnName)显示JSON数据的值。
请检查代码，并告诉我解决方案。
JavaScript代码：
var _data = new Array({ firstname: 'Name1', lastname: 'LastName1' }, { firstname: 'Name2', lastname: 'Lastname2' });
va
浏览 0提问于2013-12-29得票数 1
回答已采纳
我已经使用以下方法在构造函数中注册了我的processForm函数：
this.processForm =this.processForm.bind(此)；
奇怪的是，我的函数识别this.state.Fields，但是在循环中它无法识别this，将它看作undefined。
processForm() {
//validate entire form
var validForm=true;
this.state.Fields.forEach(function(field){
if(field.props.required === "1&
浏览 5提问于2017-02-21得票数 0
案例1
increaseScoreBy3 () {
this.setState({score : this.state.score + 1});
this.setState({score : this.state.score + 1});
this.setState({score : this.state.score + 1});
}
案例2
increaseScoreBy3 () {
this.setState({score : ++this.state.score});
this.setState({score : ++this.state.sc
浏览 4提问于2017-09-27得票数 1
有一个我不明白的错误。当我按下<button>50x70</button>并按下<button>run</button>时，我得到这个错误。我不明白为什么，因为它与标准的50x50电路板一起工作。
为什么这行代码会导致错误？neighbors+=board[x+i][y+j].value
TypeError: Cannot read property '0' of undefined
evaluateGen
C:/Www/Projects/gameoflife/src/App.js:65
62 |
63 | for(l
浏览 0提问于2017-08-27得票数 1
如果像tempVal0这样的东西不是空的，tempVal1也不是空的，我想跳过一整行(一次迭代)。然后，我的指针应该跳过读取特定行，然后继续读取下一组值。注意:这是一个字符串列表，不是一个excel表格
secmsisdn primrymsisdn代码
23434 85353340324 2
23423 85352340326 2
85358340325 2
int forindex=0;
for (List<String> tempList : userInputList) {
List<S
浏览 2提问于2014-01-17得票数 0
我试图通过Firebase Auth在一个‘配置文件’页面上呈现用户的详细信息，如果他们愿意的话，他们可以更新。
我试图在‘ComponentDid装入’中这样做，所以在页面加载时，使用state。但是，我试图运行的函数是将'this.setState‘调用返回为'undefined’。
这是错误消息：
未处理拒绝(TypeError)：未定义不是对象(计算'this.setState')
是否有一种方法可以重构我的代码，以便使用firebase.auth.onAuthStateChanged在页面加载时呈现？
以下是我的组件代码：
class Profile
浏览 6提问于2020-10-27得票数 0
回答已采纳
我正在通过构建这个简单的应用程序来测试react，这个应用程序需要一个对象数组，并根据搜索对它们进行过滤。
我使用JSON占位符帖子作为后端
这是从JSON占位符获取数据的代码
componentDidMount() {
axios('/api/posts/')
.then(res => this.setState({ posts: res.data}))
.catch(err => console.error(err));
};
这是过滤的代码
let filterdPosts = this.state.posts.filter(post =&
浏览 4提问于2020-05-25得票数 0
1回答
等待提交-操作完成
、、、
在将提交过程与LibGit2Sharp同步时，我遇到了问题。我有一个例程，可以更改一个文件并在Git中提交它。这个例行公事可能很快就会接踵而至。问题是，当最后一次提交正在运行时，下一个提交例程是运行并使用EmptyCommitException崩溃。
下面是一个简单的例子：
for (int i = 0; i < 100; i++)
{
using (StreamWriter sw = new StreamWriter(@"...\Test3.txt", false))
{
浏览 3提问于2014-04-23得票数 1
回答已采纳
1回答
从数组中删除错误项
、、、、
我有一个组件，它包含一个处于状态的项数组，但是每当我试图删除一个项目时，错误的一个就会被删除。
下面是我的父组件的简化版本：
export default class BankList extends Component {
state = {
banks: [new Bank("Name1"), new Bank("Name2")]
}
addBank() {
this.setState({banks: [...this.state.banks, new Bank("")]})
浏览 0提问于2019-02-04得票数 1
回答已采纳
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
num: 1
}
}
componentDidMount() {
this.setState({
num: this.state.num+1
});
this.setState({
num: this.state.num+1
});
}
render() {
return (
<div&g
浏览 2提问于2018-11-26得票数 0
我想从这个数组构建一个列数组--目标是让这个方法接受一个锯齿状的array，即不是方形的或者矩形的，例如我的代码示例中的on是矩形的。从我的输出中可以看出，一个数组的第四个索引等于零，尽管它被赋值时的值似乎实际上等于sales数组中的正确值。注意，在main方法中，当我输出salesByColumn[2][4]时，值是0.0 (这是控制台的最后一个条目)。如果您查看用于生成这个2D数组的方法的Sales类，当它指定salesByColumn时，它这样做就像salesByColumn[ i ][ j ]一样，因此您可以确定当为该索引分配i = 2和j = 4时。该方法将salesByColumn
浏览 1提问于2020-01-22得票数 0
回答已采纳
渲染过程中出现以下错误/警告：
Warning: Each child in a list should have a unique "key" prop.
Check the render method of `App`. See .. for more information.
in ListItemCustom (at App.js:137)
in App (created by WithStyles(App))
in WithStyles(App) (at src/index.js:7)
该怎么办呢？我需要向我的ListItem materia
浏览 0提问于2019-12-04得票数 5
我有一个问题，可能听起来很傻。在下面的代码中，有2条console.log(i)语句。我想知道为什么第二个console.log(i)语句在第一次迭代时返回值为2而不是1(即第一个语句i=n，第二个：i=n+1)。在循环结束之前，两者不应该都等于1吗？
function toggleWrapper(){
var el1 = document.querySelectorAll('[class="tCell entryDesc"]');
for (var i = 1; i < el1.length; i++) {
consol
浏览 0提问于2018-06-16得票数 0
我在一个ng-repeat中有一个ng-repeat。我正在努力获取这两个级别的索引，但无法：
<tbody>
<tr ng-repeat="element in body">
<td ng-repeat="h in header" style="width:{{h.width}}px">
<div col="{{$parent.$parent.$index}}" row="{{$parent.$index}}">{{element
浏览 1提问于2014-03-26得票数 7
回答已采纳
在循环中将元素添加到HashMap时，我遇到了一个强度问题。我确保在迭代之前声明映射，每次忽略它的娱乐，但是我得到了相同的问题- in映射仍然只是循环迭代中的最后一个元素。代码是
//declare map
Map<String, String> map = new HashMap<String, String>();
//my loop iteration
String[] array = {"element1", "element2", "element3"};
for (String str: a
浏览 3提问于2015-12-03得票数 0
回答已采纳
这是一个javascript问题。不久前我在Ruby教程中学习了一种排序模式，现在我正尝试在javascript中重用相同的模式：
const sortMyArray = (someArr) => {
let arrToSort = [...someArr];
let sorted = false;
while(!sorted) {
sorted = true;
array1.forEach((foo) => {
array2.forEach((bar, i) => {
if (foo.attr !== bar.att
浏览 0提问于2021-04-07得票数 0
所以我遇到了这个问题，在过去的几天里，我的头撞到了墙上，我有一个简单的表格，可能有不止一个div，有四个输入，但它们都是相互关联的。我要做的是在div值中计算最后一个输入，这个值基于输入的其余值，并被动态地输入，然后返回一个新的状态。我有处理程序函数(用于添加、删除或更改输入字段的值)，这些函数在不需要处理此特定更新时工作。下面是代码：
class App extends React.Component {
state = {
bank: 10,
totalPrice: 0,
hands: [
{
nam
浏览 1提问于2018-11-03得票数 0
回答已采纳
1回答
从回路返回
、、、
for (j in 1:2){ #first iteration
for (i in 1:2){ #second iteration
lst1 <- replicate(i, data.frame(
matrix(c(letters[1:2],
sample(c(rep(1,100),0), size = 1),
sample(c(rep(0,100),1), size = 1)), ncol = 2) ), simplify = FALSE)
}
return(lst1)
}
浏览 2提问于2021-12-28得票数 0
2回答
我试着从DB中得到一个嵌套的子程序--这是一个结构
当我登录时，我想从对象获取URI，我可以在控制台中看到这个
这是一个代码：
componentWillMount() {
const { gKey } = this.state;
firebase
.database()
.ref(`providers/${gKey}`)
.once("value")
.then(async snapshot => {
let aboutMe = snapshot.val().aboutMe;
浏览 0提问于2019-07-17得票数 2
回答已采纳
我尝试每3秒旋转一次图像，但图像的加载速度似乎越来越快，它运行的时间越长，就像设置的间隔被多次调用而不只是一次，我需要useEffect吗
import React, { useState } from "react";
import image1 from "../images/carousel/screen-1.png";
import image2 from "../images/carousel/screen-2.png";
import image3 from "../images/carousel/screen-3.png&#
浏览 0提问于2019-11-15得票数 2
1回答
将2d数组显示为映射
、、、、
我需要一个2d数组来显示为地图。g_length和w_width是从x和y点开始的时间。需要创建一个循环，获取应该放置在map.x_crop和y_crop上的裁剪的宽度和长度为x和y坐标。w_width是宽度，g_length是位于类中的作物的长度或高度。
bool Crop::place(char map[MAPL][MAPW],int x_crop,int y_crop)const{
int y_total =y_crop;
y_total = y_crop + g_length;
for(int x=0; x < MAPW;x++){
if(x==x_crop){
浏览 2提问于2014-10-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
