javascript - Javascript/React Native 循环仅将变量更新为最后一个值
问题描述
我正在使用 react native 循环来显示节标题和数据。
我的预期输出将是:
> 第 0 节
数据1 数据2
> 第 1 节
数据1 数据2
> 第 2 节
数据1 数据2
这将根据循环编号循环该部分
但是,实际输出是这样的: 实际输出
它只显示最后一个循环值
import React, { Component } from 'react';
import { Text, StyleSheet, View, SafeAreaView, SectionList } from 'react-native';
export default class Appointment extends Component {
constructor(props) {
super(props)
this.state = {
appointmentList: [{
index: '',
data: ['']
}]
}
}
componentDidMount() {
let appointmentListItem = {};
let appointment = [];
for (let i = 0; i < 3; i++) {
console.log(i);
appointmentListItem.index = i;
appointmentListItem.data = ['data1', 'data2'];
appointment.push(appointmentListItem);
}
this.setState({
appointmentList: appointment
});
}
render() {
return (
<SafeAreaView>
<SectionList
sections={this.state.appointmentList}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => <Text>{item}</Text>}
renderSectionHeader={({ section: { index } }) => (
<View style={{ backgroundColor: 'red' }}>
<Text>{index}</Text>
</View>
)}
/>
</SafeAreaView>
)
}
}
这个问题有什么解决办法吗?非常感谢
解决方案
该变量appointmentListItem
被实例化一次,然后随着 for 循环的迭代而发生变异。这导致单个对象引用被appointment
多次添加到列表中,最近的突变适用于所有引用的对象。
将变量的声明移动appointmentListItem
到 for 循环体中,如下所示:
componentDidMount() {
let appointment = [];
for (let i = 0; i < 3; i++) {
console.log(i);
const appointmentListItem = {}
appointmentListItem.index = i;
appointmentListItem.data = ['data1', 'data2'];
appointment.push(appointmentListItem);
}
this.setState({
appointmentList: appointment
});
}
推荐阅读
- r - knn 循环结果列表中的精度与实际 knn 精度不同
- vector - 如何在不创建新对象的情况下将向量向量转换为切片向量?
- azure-cosmosdb - 使用 Azure 数据工厂处理 Cosmos DB 中的每个项目
- git - 重新设置分支给我一个非快进错误
- java - EclipseLink 中的批量乐观锁定查询
- ios - UIButton 子类在没有 setTitleColor(_ , for state:) 的情况下更改标题颜色 [Swift]
- node.js - 在 WSL 上安装 twilio-cli
- php - 如何根据请求的子目录进行不同的 htaccess 重定向?
- c++ - 从持续时间构造 std::chrono::system_clock::time_point
- javascript - React:如何获取已获取的 Promise 值