反應本機-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 }));
}

注意：同樣，我不確定這是否是正確的方法，但是如果您恰好知道一種更好的共享方法，我就是這樣做的。