Javascript / React Собственный цикл только обновляет переменную до последнего значения - PullRequest
Новая
       18

Javascript / React Собственный цикл только обновляет переменную до последнего значения

0 голосов
/ 16 февраля 2020

Я работаю с реагировать родной l oop, чтобы отобразить заголовок раздела и данные.

Мой ожидаемый результат будет выглядеть следующим образом:

> Раздел 0

data1 data2

> Раздел 1

data1 data2

> Раздел 2

data1 data2

, который будет l oop секция в соответствии с l oop числом

Тем не менее, фактический вывод выглядит следующим образом: Фактический вывод

Отображается только последнее значение цикла 

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>
            )
        }
    }

Есть ли решение этой проблемы? Большое спасибо

1 Ответ

0 голосов
/ 16 февраля 2020

Переменная appointmentListItem создается один раз, а затем изменяется как итерация для l oop. Это приводит к тому, что одна ссылка на объект добавляется в список appointment много раз, причем последняя мутация применяется ко всем ссылочным объектам.

Переместите объявление переменной appointmentListItem в тело для l oop, например: 

    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
        });


    }
...