0

在我的项目中，我有很多用户和很多资源（以及很多 user_resources/用户和资源之间的连接）。当我 POST 到 user_resources 时，我看到它在我的 rails 后端工作（就像我看到发布的那个实例一样），但在我的反应中前端我没有看到它在更新时列出。但是，一旦应用程序完全刷新（当我停止并重新启动 expo 服务器时），我终于看到了这些项目。有任何想法吗？我一直在努力解决这个问题，但无济于事，我的项目是由于 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,StyleSheet, Text, View, FlatList, 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
  }
}

请帮我在这里找到问题，我正在丢失它。

4

0 回答 0