失去理智-为什么我的提取不重新呈现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 (将#修改为@）