Question

我已经创建了一个平面列表，并且每个项目都有一个按钮，onPress会更改该按钮的值。当我更改商品价值时，问题就出现了，因为该商品也会意外地降到平板清单的最后位置。

这仅在React-Native 57 +版本中发生

55.4版本没有遇到这个问题，但是我需要将react-native升级到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>
);

Answer 1

您正在尝试将项目追加到列表中。这就是为什么它在列表末尾显示项目。

尝试下面的代码，我已经尝试过并且可以正常工作：

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

Answer 2

对象不维护属性顺序。这就是为什么更新订单时列表中的订单会更改的原因。 ECMA脚本将object定义为

对象是对象类型的成员。这是无序的属性集合，每个属性包含一个原始值，对象或功能。存储在对象属性中的函数是称为方法。

因此，为了维持顺序，最好使用数组。

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},
    ]

React-Native FlatList项目在更新后更改位置

2 个答案: