Question

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

这是我的代码

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

Answer 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: '',
    };
}

React Native - AsyncStorage项目到Flatlist

1 个答案: