javascript - React Native - componentWillReceiveProps 到 AsyncStorage
问题描述
我在将数据从“componentWillReceiveProps”存储到 AsyncStorage 时遇到问题,我什至不确定这是否可能?因为我已经在互联网上搜索过,实际上并没有关于将“componentWillReceiveProps”数据存储到 AsyncStorage 的帖子。
所以这就是我所得到的,我的“componentWillReceiveProps”中的数据基本上来自它的父组件/屏幕。从这里开始,当用户点击发送按钮时,我的“componentWillReceiveProps”的数据应该存储到 AsyncStorage,然后在需要显示时再次获取。
这是我的代码
模态屏幕.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>
)
}
}
解决方案
我不确定这是否真的很好,但我通过创建其他键来解决它,这些键专用于我想存储在函数内部的 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 }));
}
注意:我不确定这是否是正确的方法,但我就是这样做的,如果你们碰巧知道更好的方法,请随时分享。
推荐阅读
- php - 从php为chartjs构建一个javascript回调函数
- mysql - 获取具有多对多关系的单行返回?
- android - Android 中的 Azure B2C 密码重置策略
- ios - Xcode swift在多个故事板中管理多个视图控制器
- python - 如何区分颜色条光谱低端的值?(sns 热图)
- javascript - Angular:在路线更改时滚动到顶部
- visual-studio - 如何从微型过滤器内核驱动程序获取当前进程映像路径?
- php - 类 PHPUnitLogger 不能从接口 PHPUnit\TextUI\ResultPrinter 扩展
- powershell - 在powershell中连接csv文件,没有第一行(第一个文件除外)
- typescript - 动态组件环回 4