Reactjs TypeScript错误:尝试发布数据后未处理的承诺拒绝
我在flatlist中创建了一个按钮AddMargin,它将数据发布到后端,但当我尝试发布时,它会抛出未处理的承诺拒绝错误 我的添加边距功能如下所示:Reactjs TypeScript错误:尝试发布数据后未处理的承诺拒绝,reactjs,react-native,react-native-android,react-native-flatlist,react-native-modal,Reactjs,React Native,React Native Android,React Native Flatlist,React Native Modal,我在flatlist中创建了一个按钮AddMargin,它将数据发布到后端,但当我尝试发布时,它会抛出未处理的承诺拒绝错误 我的添加边距功能如下所示: margin = () => { let data = { method: 'POST', body: JSON.stringify({ margin: this.state.margin, }), headers: {
margin = () => {
let data = {
method: 'POST',
body: JSON.stringify({
margin: this.state.margin,
}),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
}
console.log(data)
this.setState({
isLoading: true,
})
return fetch('some url',item._id )
.then((response) => response.text())
.then((responseJson) => {
this.setState({
isLoading: false,
data: responseJson.data,
});
console.log(JSON.stringify(responseJson));
})
}
<TextInput value={this.state.margin} onChangeText={(text) => this.setState({ margin: text })}placeholder="enter margin" />
<TouchableHighlight onPress={this.margin}>
<Text>Add Margin </Text>
</TouchableHighlight>
render() {
const ViewportAwareVideo = Viewport.Aware(Video);
if (this.state.isLoading) {
return (
<View style={{ flex: 1, padding: 20 }}>
<ActivityIndicator />
</View>
);
}
return (
<View >
<StatusBar hidden />
<TouchableOpacity
onPress={() => this.props.navigation.navigate('Cart')}
style={{
position: 'absolute',
top:10,
right:80,
zIndex:100
}}>
<Icon
name="shopping-cart"
size={24}
style={{ paddingLeft: 60}}
color="white"
/>
</TouchableOpacity>
<TouchableOpacity
style={{
position: 'absolute',
top:10,
right:20,
zIndex:100
}}
onPress={() => this.props.navigation.navigate('User')}
>
<Icon
name="user-circle"
size={24}
style={{ paddingLeft: 20 }}
color="white"
/>
</TouchableOpacity>
<SwiperFlatList
initialNumToRender={1}
vertical={this.state.vertical}
index={0}
data={this.state.data.product}
scrollEventThrottle={1}
onEndThreshold={0}
renderItem={({ item }) => (
<View style = {{alignContent: 'stretch'}} >
<View>
<ScrollView >
<GestureRecognizer
onSwipeLeft={this.onSwipeLeft}/>
<ViewportAwareVideo
repeat paused={this.state.videoPaused}
source={{ uri: item.urlVid }}
resizeMode = "cover"
preTriggerRatio={PRE_TRIGGER_RATIO}
retainOnceInViewport={false}
style={{width: width, height:height}}
innerRef={ref => this._videoRef = ref}
onViewportEnter={() => this._videoRef.play()}
onViewportLeave={() => this._videoRef.stop()}
/>
</ScrollView>
</View>
<View
style={{
position: 'absolute',
flexDirection: 'column',
alignItems: 'flex-end',
top: '50%',
right: 10,
}}>
<TouchableOpacity
onPress= {() => this.onButtonPress(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon
name="heart"
size={30}
color={this.state.likedItemIds.includes(item._id) ? "red" : "white"}
/>
<Modal
style={{flex:1,
justifyContent: 'center',
alignItems: 'center',
marginTop: (Platform.OS == 'android') ? 20 : 0}}
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose = {() => { this.props.navigation.navigate('Home'), console.log('closed') } }>
<View>
<Text>{item.title} - {item.price}</Text>
<TextInput value={this.state.margin} onChangeText={(text) => this.setState({ margin: text })}placeholder="enter margin" />
<TouchableHighlight onPress={this.margin}>
<Text>Add Margin </Text>
</TouchableHighlight>
{/* <TouchableHighlight
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}> */}
{/* <TouchableHighlight onPress={()=>{this.props.navigation.navigate('Home')}}>
<Text>Go Back</Text></TouchableHighlight> */}
{/* </TouchableHighlight> */}
</View>
</Modal>
</TouchableOpacity>
<TouchableOpacity
onPress={()=>this.shareProduct(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="share" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
<TouchableOpacity
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="whatsapp" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
<TouchableOpacity
onPress= {() => this.download(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="download" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
</View>
<View
style={{
position: 'absolute',
flexDirection: 'column',
top: '90%',
left: 10,
}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Product', {_id: item._id})}>
<View
style={{
flexDirection: 'row',
}}>
<Text
style={{ fontWeight: 'bold', fontSize: 20, color: 'white' }}>
{item.title} - {item.price}
</Text>
</View>
</TouchableOpacity>
</View>
</View>
)}
keyExtractor={ item => item._id}
/>
</View>
);
}
}
// AppRegistry.registerComponent('homePage',()=> homePage);
export default withNavigationFocus(Videos)
我已按如下方式调用了上述函数:
margin = () => {
let data = {
method: 'POST',
body: JSON.stringify({
margin: this.state.margin,
}),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
}
console.log(data)
this.setState({
isLoading: true,
})
return fetch('some url',item._id )
.then((response) => response.text())
.then((responseJson) => {
this.setState({
isLoading: false,
data: responseJson.data,
});
console.log(JSON.stringify(responseJson));
})
}
<TextInput value={this.state.margin} onChangeText={(text) => this.setState({ margin: text })}placeholder="enter margin" />
<TouchableHighlight onPress={this.margin}>
<Text>Add Margin </Text>
</TouchableHighlight>
render() {
const ViewportAwareVideo = Viewport.Aware(Video);
if (this.state.isLoading) {
return (
<View style={{ flex: 1, padding: 20 }}>
<ActivityIndicator />
</View>
);
}
return (
<View >
<StatusBar hidden />
<TouchableOpacity
onPress={() => this.props.navigation.navigate('Cart')}
style={{
position: 'absolute',
top:10,
right:80,
zIndex:100
}}>
<Icon
name="shopping-cart"
size={24}
style={{ paddingLeft: 60}}
color="white"
/>
</TouchableOpacity>
<TouchableOpacity
style={{
position: 'absolute',
top:10,
right:20,
zIndex:100
}}
onPress={() => this.props.navigation.navigate('User')}
>
<Icon
name="user-circle"
size={24}
style={{ paddingLeft: 20 }}
color="white"
/>
</TouchableOpacity>
<SwiperFlatList
initialNumToRender={1}
vertical={this.state.vertical}
index={0}
data={this.state.data.product}
scrollEventThrottle={1}
onEndThreshold={0}
renderItem={({ item }) => (
<View style = {{alignContent: 'stretch'}} >
<View>
<ScrollView >
<GestureRecognizer
onSwipeLeft={this.onSwipeLeft}/>
<ViewportAwareVideo
repeat paused={this.state.videoPaused}
source={{ uri: item.urlVid }}
resizeMode = "cover"
preTriggerRatio={PRE_TRIGGER_RATIO}
retainOnceInViewport={false}
style={{width: width, height:height}}
innerRef={ref => this._videoRef = ref}
onViewportEnter={() => this._videoRef.play()}
onViewportLeave={() => this._videoRef.stop()}
/>
</ScrollView>
</View>
<View
style={{
position: 'absolute',
flexDirection: 'column',
alignItems: 'flex-end',
top: '50%',
right: 10,
}}>
<TouchableOpacity
onPress= {() => this.onButtonPress(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon
name="heart"
size={30}
color={this.state.likedItemIds.includes(item._id) ? "red" : "white"}
/>
<Modal
style={{flex:1,
justifyContent: 'center',
alignItems: 'center',
marginTop: (Platform.OS == 'android') ? 20 : 0}}
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose = {() => { this.props.navigation.navigate('Home'), console.log('closed') } }>
<View>
<Text>{item.title} - {item.price}</Text>
<TextInput value={this.state.margin} onChangeText={(text) => this.setState({ margin: text })}placeholder="enter margin" />
<TouchableHighlight onPress={this.margin}>
<Text>Add Margin </Text>
</TouchableHighlight>
{/* <TouchableHighlight
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}> */}
{/* <TouchableHighlight onPress={()=>{this.props.navigation.navigate('Home')}}>
<Text>Go Back</Text></TouchableHighlight> */}
{/* </TouchableHighlight> */}
</View>
</Modal>
</TouchableOpacity>
<TouchableOpacity
onPress={()=>this.shareProduct(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="share" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
<TouchableOpacity
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="whatsapp" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
<TouchableOpacity
onPress= {() => this.download(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="download" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
</View>
<View
style={{
position: 'absolute',
flexDirection: 'column',
top: '90%',
left: 10,
}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Product', {_id: item._id})}>
<View
style={{
flexDirection: 'row',
}}>
<Text
style={{ fontWeight: 'bold', fontSize: 20, color: 'white' }}>
{item.title} - {item.price}
</Text>
</View>
</TouchableOpacity>
</View>
</View>
)}
keyExtractor={ item => item._id}
/>
</View>
);
}
}
// AppRegistry.registerComponent('homePage',()=> homePage);
export default withNavigationFocus(Videos)
请帮助我,并指出我做错了什么,如果你还需要什么,请告诉我
我的渲染方法如下所示:
margin = () => {
let data = {
method: 'POST',
body: JSON.stringify({
margin: this.state.margin,
}),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
}
console.log(data)
this.setState({
isLoading: true,
})
return fetch('some url',item._id )
.then((response) => response.text())
.then((responseJson) => {
this.setState({
isLoading: false,
data: responseJson.data,
});
console.log(JSON.stringify(responseJson));
})
}
<TextInput value={this.state.margin} onChangeText={(text) => this.setState({ margin: text })}placeholder="enter margin" />
<TouchableHighlight onPress={this.margin}>
<Text>Add Margin </Text>
</TouchableHighlight>
render() {
const ViewportAwareVideo = Viewport.Aware(Video);
if (this.state.isLoading) {
return (
<View style={{ flex: 1, padding: 20 }}>
<ActivityIndicator />
</View>
);
}
return (
<View >
<StatusBar hidden />
<TouchableOpacity
onPress={() => this.props.navigation.navigate('Cart')}
style={{
position: 'absolute',
top:10,
right:80,
zIndex:100
}}>
<Icon
name="shopping-cart"
size={24}
style={{ paddingLeft: 60}}
color="white"
/>
</TouchableOpacity>
<TouchableOpacity
style={{
position: 'absolute',
top:10,
right:20,
zIndex:100
}}
onPress={() => this.props.navigation.navigate('User')}
>
<Icon
name="user-circle"
size={24}
style={{ paddingLeft: 20 }}
color="white"
/>
</TouchableOpacity>
<SwiperFlatList
initialNumToRender={1}
vertical={this.state.vertical}
index={0}
data={this.state.data.product}
scrollEventThrottle={1}
onEndThreshold={0}
renderItem={({ item }) => (
<View style = {{alignContent: 'stretch'}} >
<View>
<ScrollView >
<GestureRecognizer
onSwipeLeft={this.onSwipeLeft}/>
<ViewportAwareVideo
repeat paused={this.state.videoPaused}
source={{ uri: item.urlVid }}
resizeMode = "cover"
preTriggerRatio={PRE_TRIGGER_RATIO}
retainOnceInViewport={false}
style={{width: width, height:height}}
innerRef={ref => this._videoRef = ref}
onViewportEnter={() => this._videoRef.play()}
onViewportLeave={() => this._videoRef.stop()}
/>
</ScrollView>
</View>
<View
style={{
position: 'absolute',
flexDirection: 'column',
alignItems: 'flex-end',
top: '50%',
right: 10,
}}>
<TouchableOpacity
onPress= {() => this.onButtonPress(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon
name="heart"
size={30}
color={this.state.likedItemIds.includes(item._id) ? "red" : "white"}
/>
<Modal
style={{flex:1,
justifyContent: 'center',
alignItems: 'center',
marginTop: (Platform.OS == 'android') ? 20 : 0}}
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose = {() => { this.props.navigation.navigate('Home'), console.log('closed') } }>
<View>
<Text>{item.title} - {item.price}</Text>
<TextInput value={this.state.margin} onChangeText={(text) => this.setState({ margin: text })}placeholder="enter margin" />
<TouchableHighlight onPress={this.margin}>
<Text>Add Margin </Text>
</TouchableHighlight>
{/* <TouchableHighlight
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}> */}
{/* <TouchableHighlight onPress={()=>{this.props.navigation.navigate('Home')}}>
<Text>Go Back</Text></TouchableHighlight> */}
{/* </TouchableHighlight> */}
</View>
</Modal>
</TouchableOpacity>
<TouchableOpacity
onPress={()=>this.shareProduct(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="share" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
<TouchableOpacity
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="whatsapp" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
<TouchableOpacity
onPress= {() => this.download(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="download" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
</View>
<View
style={{
position: 'absolute',
flexDirection: 'column',
top: '90%',
left: 10,
}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Product', {_id: item._id})}>
<View
style={{
flexDirection: 'row',
}}>
<Text
style={{ fontWeight: 'bold', fontSize: 20, color: 'white' }}>
{item.title} - {item.price}
</Text>
</View>
</TouchableOpacity>
</View>
</View>
)}
keyExtractor={ item => item._id}
/>
</View>
);
}
}
// AppRegistry.registerComponent('homePage',()=> homePage);
export default withNavigationFocus(Videos)
render(){
const ViewportAwareVideo=Viewport.Aware(视频);
if(此.state.isLoading){
返回(
);
}
返回(
this.props.navigation.navigate('Cart')}
风格={{
位置:'绝对',
前10名,
右:80,,
zIndex:100
}}>
this.props.navigation.navigate('User')}
>
(
这个.\u videoRef=ref}
onViewportEnter={()=>这个。\ u videoRef.play()}
onViewportLeave={()=>this.\u videoRef.stop()}
/>
此.onButton按(项目)}
风格={{
对齐项目:“居中”,
边界半径:60,
填充:10,
}}>
{this.props.navigation.navigate('Home')、console.log('closed')}>
{item.title}-{item.price}
this.setState({margin:text})占位符=“输入margin”/>
追加保证金
{/* {
this.setModalVisible(!this.state.modalVisible);
}}> */}
{/*{this.props.navigation.navigate('Home')}>
返回*/}
{/* */}
this.shareProduct(项目)}
风格={{
对齐项目:“居中”,
边界半径:60,
填充:10,
}}>
这个。下载(项目)}
风格={{
对齐项目:“居中”,
边界半径:60,
填充:10,
}}>
this.props.navigation.navigate('Product',{u id:item.\u id}}>
{item.title}-{item.price}
)}
keyExtractor={item=>item.\u id}
/>
);
}
}
//AppRegistry.registerComponent('主页',()=>主页);
使用NavigationFocus导出默认值(视频)
向我们展示您添加的渲染方法@utkarspramodgupta