javascript - Javascript/React Native 循环仅将变量更新为最后一个值

Question

我正在使用 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>
            )
        }
    }

这个问题有什么解决办法吗？非常感谢

Answer 1

该变量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
        });


    }