Реактивный элемент FlatList меняет положение после обновления - PullRequest
Новая
       6

Реактивный элемент FlatList меняет положение после обновления

0 голосов
/ 05 декабря 2018

Я создал плоский список, и у каждого элемента есть кнопка, с помощью которой onPress меняет значение элемента.Эта проблема возникает, когда я меняю значение элемента, так как этот элемент также неожиданно падает до последней позиции плоского списка.

Это происходит только в React-Native версии 57 +

.Версия 55.4 не столкнулась с этой проблемой, но мне нужно обновить реактивную версию до 57 +.

Заранее спасибо за любую помощь:)

Вот пример кода: 

import React, { Component } from 'react';
import { View, Text, FlatList, StyleSheet, Button } from 'react-native';

class List extends Component {

state = {
    currencies: {
        USD: 0,
        EUR: 0,
        GBP: 0,
        BTC: 0,
        CNY: 0,
        AUD: 0,
        JPY: 0
    }
}

render() {

    return (
        <View style={styles.container}>
            <FlatList
                extraData={this.state}
                data={Object.keys(this.state.currencies)}
                style={{ flex: 1 }}
                renderItem={({ item }) => (
                    <Row
                    itemValue={this.state.currencies[item]}
                    itemName={item}
                    numberUp={(name) => this.setState({currencies: 
                    {...this.state.currencies,
                     [name] : this.state.currencies[name] + 1}
                     })
                    }
                    />
                )}
            />
        </View>
    )
  }
}

const styles = StyleSheet.create({
    container: {
    flexDirection: "row",
},
itemContainer : {
    flexDirection: "row",
    justifyContent: "center",
    margin: 10
},
itemText : {
    fontSize: 30
}
});

export default List;


const Row = (props) => (
<View style={styles.itemContainer}>
    <Text style={styles.itemText}>{props.itemName}  </Text>
    <Text style={styles.itemText}>{props.itemValue}  </Text>
    <Button title="PLUS" onPress={() => props.numberUp(props.itemName)}/>
</View>
);

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

Объект не поддерживает порядок свойств.Вот почему заказ меняется в вашем списке, когда вы обновляете его.Сценарий ECMA определяет объект как

объект является членом типа Object.Это неупорядоченный набор свойств, каждое из которых содержит примитивное значение, объект или функцию.Функция, хранящаяся в свойстве объекта, называется методом.

Поэтому для поддержания порядка лучше использовать вместо него array . 

currencies: [
{currency:USD, value:0},
{currency:EUR, value:0},
{currency:GBP, value:0},
{currency:BTC, value:0},
{currency:CNY, value:0},
{currency:JPY, value:0},
    ]
0 голосов
/ 05 декабря 2018

вы пытаетесь добавить элемент в список.вот почему он отображает элемент в конце списка.

попробуйте код ниже, я пробовал, и он работает: 

render() {
      return (
            <View style={styles.container}>
                <FlatList
                    extraData={this.state}
                    data={Object.keys(this.state.currencies)}
                    style={{ flex: 1 }}
                    renderItem={({ item }) => (
                        <Row
                        itemValue={this.state.currencies[item]}
                        itemName={item}
                        numberUp={(name) => {
                        let currencyList = this.state.currencies;
                        currencyList[name] = this.state.currencies[name] + 1;
                        this.setState({currencies: currencyList})
                        } 
                         }
                        />
                    )}
                />
            </View>
        )
      }
...