时间戳

首页 > 解决方案 > TypeError：无法读取未定义的属性“用户”| 但用户已定义

reactjs - TypeError：无法读取未定义的属性“用户”| 但用户已定义

问题描述

我现在有这个错误，我不知道为什么。

在此处输入图像描述

我知道错误行在此代码中，但我看不出我做错了什么。

const found = getState().usersState.users.some(el => el.uid === uid);

编码 ：

import { USER_STATE_CHANGE, USER_POSTS_STATE_CHANGE, USER_FOLLOWING_STATE_CHANGE, USERS_DATA_STATE_CHANGE } from "../constants/index";
import firebase from "firebase/app";
import 'firebase/firestore'

export function fetchUser(){
    return ((dispatch) =>{
        firebase.firestore()
            .collection("users")
            .doc(firebase.auth().currentUser.uid)
            .get()
            .then((snapshot) =>{
                if(snapshot.exists){
                    dispatch({type: USER_STATE_CHANGE, currentUser: snapshot.data})
                }else{
                    console.log('does not exist')
            }
        })
    })
}

export function fetchUserPosts(){
    return ((dispatch) =>{
        firebase.firestore()
            .collection("posts")
            .doc(firebase.auth().currentUser.uid)
            .collection("userPosts")
            .orderBy("creation", "asc")
            .get()
            .then((snapshot) =>{
                let posts = snapshot.docs.map(doc => {
                    const data = doc.data();
                    const id = doc.id;
                    return{id, ...data}
           })
           dispatch({type: USER_POSTS_STATE_CHANGE, posts})
        })
    })
}

export function fetchUserFollowing(){
    return ((dispatch) =>{
        firebase.firestore()
            .collection("following")
            .doc(firebase.auth().currentUser.uid)
            .collection("userFollowing")
            .onSnapshot((snapshot) =>{
                let following = snapshot.docs.map(doc => {
                    const id = doc.id;
                    return id
           })
           dispatch({type: USER_FOLLOWING_STATE_CHANGE, following})
           for(let i = 0; i < following.length; i++){
                dispatch(fetchUsersData(following[i]));
           }
        })
    })
}


export function fetchUsersData(uid) {
    return ((dispatch, getState) => {
        const found = getState().usersState.users.some(el => el.uid === uid);
        if (!found) {
            firebase.firestore()
                .collection("users")
                .doc(uid)
                .get()
                .then((snapshot) => {
                    if (snapshot.exists) {
                        let user = snapshot.data();
                        user.uid = snapshot.id;

                        dispatch({ type: USERS_DATA_STATE_CHANGE, user });
                    }
                    else {
                        console.log('does not exist')
                    }
                })
                if(getPosts){
                    dispatch(fetchUsersFollowingPosts(uid));
                }
        }
    })
}

export function fetchUsersFollowingPosts(uid) {
    return ((dispatch, getState) => {
        firebase.firestore()
            .collection("posts")
            .doc(uid)
            .collection("userPosts")
            .orderBy("creation", "asc")
            .get()
            .then((snapshot) => {
                const uid = snapshot.query.EP.path.segments[1];
                const user = getState().usersState.users.find(el => el.uid === uid);


                let posts = snapshot.docs.map(doc => {
                    const data = doc.data();
                    const id = doc.id;
                    return { id, ...data, user }
                })

                for(let i = 0; i< posts.length; i++){
                    dispatch(fetchUsersFollowingLikes(uid, posts[i].id))
                }
                dispatch({ type: USERS_POSTS_STATE_CHANGE, posts, uid })

            })
    })
}

这就是我在文件夹减速器中的内容：

index.js：

import { combineReducers } from 'redux'
import { user } from './user'
import { users } from './users'


const Reducers = combineReducers({
    userState: user,
    userState: users
})

export default Reducers

用户.js：

import { USER_STATE_CHANGE, USER_POSTS_STATE_CHANGE, USER_FOLLOWING_STATE_CHANGE } from "../constants"

const initialState = {
    currentUser: null,
    posts: [],
    follwing: [],
}

export const user = (state = initialState, action) => {
    switch (action.type) {
        case USER_STATE_CHANGE:
            return {
                ...state,
                currentUser: action.currentUser
            }
        case USER_POSTS_STATE_CHANGE:
            return {
                ...state,
                posts: action.posts
            }

        case USER_FOLLOWING_STATE_CHANGE:
            return {
                ...state,
                following: action.following
            }
            default:
                return state
    }
    
}

用户.js：

import { USERS_POSTS_STATE_CHANGE, USERS_DATA_STATE_CHANGE } from "../constants"

const initialState = {
    users: null,
    userLoaded: 0,
}

export const users = (state = initialState, action) => {
    switch (action.type) {
        case USERS_DATA_STATE_CHANGE:
            return {
                ...state,
                users: [...state.users, action.users]
            }
        case USERS_POSTS_STATE_CHANGE:
            return {
                ...state,
                usersLoaded: state.userLoaded + 1,
                users: state.users.map(user => user.uid === action.uid ?{...user, posts: action.posts} :
                user)      
            }

        
            default:
                return state
    }
    
}

标签： reactjsreduxreact-reduxexpo

解决方案

问题在这里：

const found = getState().usersState.users.some(el => el.uid === uid);

这里users来自异步请求，在第一次渲染时不可用。因此，您必须进行如下检查：

if( getState().usersState && getState().usersState.users )  // Access it when it is available
{
  const found = getState().usersState.users.some(el => el.uid === uid);
}

或者

const found = ( getState().usersState && getState().usersState.users ) ? getState().usersState.users.some(el => el.uid === uid): [];

像这样的东西。试试这个，错误就会消失，你会得到数据。

推荐阅读