如何解决失去理智-为什么我的提取不重新呈现redux
在我的项目中,我有许多用户和许多资源(以及许多user_resources /用户和资源之间的联接)。当我发布到user_resources时,我看到它在我的rails后端上工作(就像我看到发布的实例一样)我的本机前端我没有在更新时看到它。但是,一旦应用程序完全刷新(当我停止并重新启动博览会服务器时),我终于看到了渲染的那些项目。有任何想法吗?我一直一直在努力工作,但无济于事,我的项目是tmrw到期的,因此对我们的帮助表示感谢。
我张贴到user_resources的屏幕:
import React from 'react';
import { ScrollView,SafeAreaView,StyleSheet,Text,View,FlatList,TouchableOpacity,Button,NativeEventEmitter} from 'react-native';
import {connect} from 'react-redux';
import {fetchResources,searchChanged} from '../actions';
import { addUserResource } from '../actions'
import {SearchBar} from 'react-native-elements';
import { MaterialIcons } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';
class ResourcesScreen extends React.Component {
state = {
search: ''
}
componentDidMount = () =>{
this.props.fetchResources();
}
FlatListItemSeparator = () => {
return (
<View
style={{
height: 0.5,width: "100%",backgroundColor: "lightblue",}}
/>
);
}
handlePress(item) {
debugger
fetch('http://localhost:3000/user_resources',{
method: 'POST',headers: {
'Content-Type': 'application/json',Accept: 'application/json'
},body: JSON.stringify({
resource_id: item.id,user_id: this.props.users.id,name: item.name,description:item.description,link:item.link,})
})
.then(res => res.json())
.then(data2 => {
console.log(data2)
this.props.addUserResource(data2)
console.log(this.props)
})
}
header = () => {
return <View>
<Text style={styles.header}>Resources</Text>
</View>
}
onSearchChange = text => {
this.setState({search:text})
}
render(){
return(
<SafeAreaView>
<SearchBar placeholderTextColor="white" placeholder="Enter resource name here" onChangeText={this.onSearchChange} value={this.state.search}/>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Add A New Resource',{topicId:this.props.route.params.topicId})} style={styles.buttonitem}>
<Text style={styles.text}>
<MaterialIcons name="add-circle-outline" size={24} color="white"/>Add A New Resource
</Text>
</TouchableOpacity>
<FlatList keyExtractor={(item)=> item.id.toString()} data={this.props.resourceName} ItemSeparatorComponent = { this.FlatListItemSeparator } renderItem={({item}) => {
return <TouchableOpacity style={styles.material2}>
<Text onPress={() => this.props.navigation.navigate('Add A New Resource',{topicId:item.id})} style={styles.listitem}>{item.name}</Text>
<MaterialCommunityIcons name="bookmark-plus" size={50} color="#16a085" backgroundColor='black' onPress={()=>this.handlePress(item)}/>
</TouchableOpacity>
}}
ListHeaderComponent = {this.header}/>
</SafeAreaView>
)
}
}
const mapStateToProps = (state) => {
return {
resourceName: state.resourceReducer.resources,users: state.userReducer,search:state.resourceReducer.searchTerm
}
}
const mapDispatchToProps = (dispatch) => {
return {
fetchResources: () => dispatch(fetchResources()),addUserResource,searchChanged
}
}
export default connect(mapStateToProps,mapDispatchToProps)(ResourcesScreen)
此后,我转到个人资料页面,其中应显示user_resources,但不显示
import React from 'react';
import { ScrollView,TouchableOpacity} from 'react-native';
import {connect} from 'react-redux';
import {SearchBar} from 'react-native-elements';
import { AntDesign } from '@expo/vector-icons';
class Profile extends React.Component{
handleDelete = (id) => {
debugger
fetch(`http://localhost:3000/user_resources/${id}`,{
method: "DELETE",headers: {
"Authorization": this.props.users.token
}
})
.then(r => r.json())
.then((delResource) => {
console.log(delResource)
this.props.deleteOneFood(delResource)
console.log('deleted')
this.forceUpdate()
})
}
render(){
return(
<View>
{this.props.users.user_resources.map(singleResource=> {
return <Text key={singleResource.id}>{singleResource.name}</Text>
})}
</View>
)}
}
let deleteOneResource = (id) => {
return {
type: "DELETE_ONE_USER_RESOURCE",payload: id
}
}
const mapDispatchToProps = {
deleteOneResource
}
const mapStateToProps = (state) => {
return {
users: state.userReducer,}
}
export default connect(mapStateToProps,mapDispatchToProps)(Profile)
我以前曾做过座谈会,但认为可能是导致问题的原因,所以换了另一种说法,仍然没有运气。我也尝试过forceUpdates,但还是没有运气。我不确定问题是否来自我的减速器:
let userInitialState = {
id: 0,username: "",name: '',category: '',token: "",user_resources:[],}
let userReducer = (state = userInitialState,action) => {
switch(action.type){
case "ADD_USERS":
let singleNestedObject = {
...action.users.user,token: action.users.token
}
return {
...state,username: action.users.user.username,token: action.users.token,id: action.users.user.id,name: action.users.user.name,category: action.users.user.category,user_resources: action.users.user.user_resources
}
case "ADD_ONE_USER_RESOURCE":
let copyOfResources = [...state.user_resources,action.userResources]
return {
...state,user_resources: copyOfResources
}
default:
return state
}
}
这是行动
export const addUserResource = (resourceInfo) => {
return {
type: "ADD_ONE_USER_RESOURCE",userResources: resourceInfo
}
}
请帮助我在这里找到问题,我迷路了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。