Реагировать на собственный - componentWillReceiveProps для AsyncStorage

Question

У меня проблемы с хранением данных из "componentWillReceiveProps" в AsyncStorage, и я даже не уверен, возможно ли это или нет? Потому что я уже искал в интернете, и на самом деле нет никаких сообщений о сохранении данных «componentWillReceiveProps» в AsyncStorage.

Итак, вот что я получил, данные из моего "componentWillReceiveProps" в основном взяты из его родительского компонента / экрана. И отсюда, когда пользователь нажимает кнопку «Отправить», данные моего «componentWillReceiveProps» должны быть сохранены в AsyncStorage, а затем получить его снова, как только это необходимо показать.

Вот мой код

ModalScreen.js

export default class ModalScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: props.modalVisible,
            textQty: '',
            getDet: ''
            getID_Det: ''
            getPrice_Det: ''
        };
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            modalVisible: nextProps.modalVisible,
            OG_id: nextProps.id,                 // Data from other screen
            OG_price: nextProps.price            // this should be included in storing.
        })
    }

    setItem = () => {
        AsyncStorage.setItem('Key_1', this.state.textQty, this.state.OG_id, this.state.OG_price);
        Alert.alert("Saved");
    };
    getItem = () => {
        AsyncStorage.getItem('Key_1')
        .then((value) => this.setState({ getDet : value }))
        .then((value_1) => this.setState({ getID_Det : value_1 }))   // I'm not sure if this is the right way.
        .then((value_2) => this.setState({ getPrice_Det : value_2 }))
    }

        render() {
        return (
            <View>
                <Modal
                animationType = 'slide'
                visible = { this.state.modalVisible }
                onRequestClose={() => { this.props.setModalVisible(false) }}>
                    <View>
                        <View>
                            <Text>{this.state.OG_id}</Text>
                            <Text>{this.state.OG_price}</Text>
                            <TextInput
                                style={styles.textInput}
                                placeholder="Enter Quantity!"
                                onChangeText = { data => this.setState({ textQty : data }) }
                                returnKeyLabel = "done"
                                returnKeyType = "done"
                            />
                            <TouchableOpacity onPress = { this.setItem }>
                                <Text>Send</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                             onPress = {() => { this.props.setModalVisible(false) }}>
                                <Text>Close</Text>
                            </TouchableOpacity>

                            <TouchableOpacity onPress = { this.getItem }>
                                <Text>Show</Text>
                            </TouchableOpacity>

                            <Text>{ this.state.getDet }</Text>
                            <Text>{ this.state.getID_Det }</Text>
                            <Text>{ this.state.getPrice_Det }</Text>

                        </View>
                    </View>
                </Modal>
            </View>
        )
    }
}

Answer 1

Я не уверен, что это действительно хорошо, но я решаю эту проблему, создавая другие ключи, предназначенные для других элементов, которые я хочу сохранить в AsyncStorage внутри функции.

Пример:

constructor(props) {
    super(props);
    this.state = {
        Det_id: [],
        Det_price: [],
        textQty: '',
        getDet: ''
    }
}

setItem = () => {
    AsyncStorage.setItem('Key_1', this.state.textQty);

    AsyncStorage.setItem('Key_2',this.state.OG_id);

    AsyncStorage.setItem('Key_3',this.state.OG_price);

    Alert.alert("Saved");
};
getItem = () => {
    AsyncStorage.getItem('Key_1')
    .then((value) => this.setState({ getDet : value }));

    AsyncStorage.getItem('Key_2')
    .then((value_1) => this.setState({ getID_Det : value_1 }));

    AsyncStorage.getItem('Key_3')
    .then((value_2) => this.setState({ getPrice_Det : value_2 }));
}

ПРИМЕЧАНИЕ: Опять же, я не уверен, что это правильный путь, но это то, как я это сделал, если вы, ребята, знаете, гораздо лучший способ для этого, не стесняйтесьдоля.