React Native - AsyncStorage 项目到平面列表答案

【问题标题】：React Native - AsyncStorage Items to FlatlistReact Native - AsyncStorage 项目到平面列表
【发布时间】：2018-05-31 18:12:12
【问题描述】：

我正在尝试在我的平面列表中显示/存储项目列表，但问题是当我保存一个项目并将该项目加载到不同的屏幕时它是一种重复（查找屏幕截图） .当我尝试添加不同的项目时，这个新项目将用相同类型的重复替换前一个项目。我的目标是有一个列表。

List_ScreenShot

这是我的代码

AddModal.js

export default class AddModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          modalVisible: props.modalVisible,
          id: null,
          count: 0,
          price: null
        };
    }

    state = {
        text: '',
    }

    save = () => {
        const { text } = this.state;
        let myArray = {
            text, text
        }
        AsyncStorage.setItem('myArray', JSON.stringify(myArray));
        alert(text + 'saved');
    }

    onChange = (text) => {
        this.setState({ text });
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
          modalVisible: nextProps.modalVisible,
            id: nextProps.id,
            price: nextProps.price
        })
    }

    render() {
      console.log('inside AppModal', this.state.modalVisible);
        return (
                <View>
                    <TextInput style = { styles.input }
                        keyboardType = "numeric"
                        onChangeText = { this.onChange }
                        value = { this.state.text }       //Item **
                     >
                     </TextInput>
                </View>

                <View}>
                     <TouchableOpacity
                        onPress = {() => { this.props.setModalVisible(false) }}
                                    >
                           <Text style = { styles.buttonText }>Cancel</Text>
                     </TouchableOpacity>

                     <TouchableOpacity
                        onPress = { this.save }>
                           <Text style = { styles.buttonText }>Send</Text>
                     </TouchableOpacity>
                 </View>
        )
    }
}

Settlment.js

import Details from '../Menus/Details';
const key = '@MyApp:key';
export default class Settlement extends React.Component {
    state = {
        text: '',
        storedValue: '',
        myArray: ''
    }

      componentWillMount() {
        //this.onLoad();
        AsyncStorage.getItem('myArray')
        .then(text => this.setState({ text }));
    }

    showData = async() => {
        let myArray = await AsyncStorage.getItem('myArray');
        let d = JSON.parse(myArray);
        this.setState({ myArray : myArray });
    }

  render() {
      const { myArray, text } = this.state;
    return (
        <View>
            <TouchableOpacity onPress = {this.showData}>
                <Text>Load Data</Text>
            </TouchableOpacity>
            <FlatList data = { this.state.myArray }
                renderItem = {({ item }) => 
                    <Text>{myArray}</Text>
                }
                keyExtractor={(item, index) => index.toString()}
            >
            </FlatList>
        </View>
    );
  }
}

【问题讨论】：

我不想通读这么多逻辑来回答你的问题。但我敢打赌，原因是因为您将某些对象的引用添加到您的平面列表中，而不是原始值。因此，当您更改一个 val 时，您将全部更改。
我应该使用其他组件吗？像mergeItem，先生？抱歉，我对本机反应很陌生。

标签： javascript android reactjs react-native asynchronous

【解决方案1】：

我在这里看到的：

      const { text } = this.state;
    let myArray = {
        text, text
    }
    AsyncStorage.setItem('myArray', JSON.stringify(myArray));
    alert(text + 'saved');

是一个名为 myArray 的对象，它没有添加任何内容。它正在被定义，然后被分配一个值。

也许你可以在构造函数中的其他地方声明你的数组（作为一个数组，而不是一个对象，使用myArray = []）然后使用myArray.push(text)，或者如果你想要一个包含对象的数组，你可以使用myArray.push({ yourKeyName: text })推送对象.此外，您存储在 AsyncStorage 中的对象似乎正在被替换而不是添加到其中。但我不确定为什么你会得到多个列表项而不是一个。

PS - 你声明状态的地方看起来有点不对劲。我通常是这样看的：

constructor() {
    super();
    this.state = { 
        text: '',
        storedValue: '',
        myArray: '',
    };
}

【讨论】：