使用redux在ReactNative应用程序中传播运算符抛出错误

Question

我正在使用redux和redux thunk构建一个带有expo的Instagram克隆，我想实现follow系统，但当我切换到配置文件屏幕时，我收到了一个指向reducers的错误。

用户.ts(减速器(：

import {
USER_STATE_CHANGE,
USER_POSTS_STATE_CHANGE,
USER_FOLLOWING_STATE_CHANGE,
CLEAR_DATA,
} from "../constants";
const initialState = {
currentUser: null,
posts: [],
following: [],
};
export const user = (state = initialState, action: any) => {
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,
};
case CLEAR_DATA:
return {
initialState,
};
default:
return state;
}
};

我得到以下错误：

TypeError：传播不可迭代实例的尝试无效。为了可迭代，非数组对象必须具有Symbol.iterator方法。

user.ts(控制用户(：

import {
USER_STATE_CHANGE,
USER_POSTS_STATE_CHANGE,
USER_FOLLOWING_STATE_CHANGE,
CLEAR_DATA,
} from "../constants";
const initialState = {
currentUser: null,
posts: [],
following: [],
};
export const user = (state = initialState, action: any) => {
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,
};
case CLEAR_DATA:
return {
initialState,
};
default:
return state;
}
};

Profile.tsx(配置文件屏幕的代码(：

import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet, Image, FlatList, Alert } from "react-native";
import db, { auth } from "../../firebase";
import { Avatar, Button, ActivityIndicator, Colors } from "react-native-paper";
import Navbar from "../shared/Navbar";
import { connect } from "react-redux";
const Profile = ({
navigation,
posts,
route,
reduxFollowing,
currentUser,
}: any) => {
const [user, setUser] = useState<any>(null);
const [userPosts, setUserPosts] = useState<any>([]);
const [loading, setLoading] = useState<boolean>(true);
const [following, setFollowing] = useState<boolean>(false);
useEffect(() => {
if (route.params.uid === auth.currentUser?.uid) {
setUser(auth.currentUser);
setUserPosts(posts);
setLoading(false);
} else {
db.collection("users")
.doc(route.params?.uid)
.get()
.then((snapshot) => {
setLoading(false);
if (snapshot.exists) {
setUser(snapshot.data());
} else {
console.log("does not exist");
}
});
db.collection("posts")
.doc(route.params.uid)
.collection("userPosts")
.orderBy("creation", "desc")
.onSnapshot((snapshot) => {
let posts = snapshot.docs.map((doc) => {
const data = doc.data();
const id = doc.id;
//Array.from(data)
console.log(data);
//return { ...data, id };
});
//setUserPosts(posts);
});
if (reduxFollowing.indexOf(route.params.uid) > -1) {
setFollowing(true);
} else {
setFollowing(false);
}
}
}, [route.params.uid, reduxFollowing]);
const onFollow = () => {
db.collection("following")
.doc(auth.currentUser?.uid)
.collection("userFollowing")
.doc(route.params.uid)
.set({})
.then(() => setFollowing(true))
.catch((err) =>
Alert.alert("Opps!, could not Login", err.message, [{ text: "Ok" }])
);
};
const onUnfollow = () => {
db.collection("following")
.doc(auth.currentUser?.uid)
.collection("userFollowing")
.doc(route.params.uid)
.delete()
.then(() => setFollowing(false))
.catch((err) =>
Alert.alert("Opps!, could not Login", err.message, [{ text: "Ok" }])
);
};
if (loading) {
return (
<View style={styles.loading}>
<ActivityIndicator size={60} color={Colors.blue500} />
</View>
);
}
const TwoBtn = () => (
<>
{following ? (
<Button
style={styles.btn}
uppercase={false}
mode="outlined"
color={Colors.green500}
onPress={onUnfollow}
>
Following
</Button>
) : (
<Button
style={styles.btn}
uppercase={false}
mode="outlined"
color="black"
onPress={onFollow}
>
Follow
</Button>
)}
<Button
style={styles.btn}
uppercase={false}
mode="outlined"
color="black"
onPress={() => navigation.navigate("Chat")}
>
Chat
</Button>
</>
);
const OneBtn = () => (
<Button
style={styles.btn2}
uppercase={false}
mode="outlined"
color="black"
onPress={() => console.log("")}
>
Edit Profile
</Button>
);
return (
<View style={styles.container}>
<Navbar
navigation={navigation}
title={auth.currentUser?.displayName || currentUser.name}
/>
<View style={styles.topContainer}>
<Avatar.Image
source={user?.photoURL || require("../../assets/Avatar.png")}
/>
<View style={styles.topRightCont}>
<Text style={styles.label}>
Name :{" "}
<Text style={styles.text}>{user?.displayName || user?.name}</Text>
</Text>
<Text style={styles.label}>
Email : <Text style={styles.text}>{user?.email}</Text>
</Text>
</View>
</View>
{route.params.uid === auth.currentUser?.uid ? (
<View style={styles.btnCont}>
<OneBtn />
</View>
) : (
<View style={styles.btnCont}>
<TwoBtn />
</View>
)}
<View style={styles.galleryCont}>
<FlatList
keyExtractor={({ item }) => item?.id}
numColumns={3}
horizontal={false}
data={userPosts}
renderItem={({ item }) => (
<Image style={styles.image} source={{ uri: item?.downloadURL }} />
)}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
//styles
});
const mapStateToProps = (store: any) => ({
currentUser: store.userState.currentUser,
posts: store.userState.posts,
reduxFollowing: store.userState.following,
});
export default connect(mapStateToProps, null)(Profile);

我不知道这是否重要，我正在关注youtube教程(链接到教程(

编辑：

这是调度USERS_DATA_STATE_CHANGE的动作

export function getUsersData(uid: any) {
return (dispatch: any, getState: any) => {
const found = getState().usersState.users?.some(
(el: any) => el.uid === uid
);
if (!found) {
db.collection("users")
.doc(uid)
.onSnapshot((snapshot) => {
if (snapshot.exists) {
let user = snapshot.data();
if (user) {
user.uid = snapshot.id;
dispatch({
type: USERS_DATA_STATE_CHANGE,
user,
});
dispatch(fetchUsersFollowingPosts(uid));
}
} else {
console.log("does not exist");
}
});
}
};
}

这是我在那里使用的功能(它在操作文件中(：

export function fetchUsersFollowingPosts(uid: any) {
return (dispatch: any, getState: any) => {
db.collection("posts")
.doc(uid)
.collection("userPosts")
.orderBy("creation", "desc")
.onSnapshot((snapshot) => {
const uid = snapshot.query.EP.path.segments[1];
const user = getState().usersState.users.find(
(el: any) => el.uid === uid
);
let posts = snapshot.docs.map((doc) => {
const id = doc.id;
const data = doc.data();
return { id, ...data, user };
});
dispatch({
type: USERS_POSTS_STATE_CHANGE,
posts,
uid,
});
});
};
}

Answer 1

首先，您的initialState似乎缺少以前的users: []prop/val对，需要将其添加回来。

然后，在您的减速器中，您将在此处返回一个新对象：

case CLEAR_DATA:
return {
initialState,
};

这需要传播：

case CLEAR_DATA:
return {
...initialState
};

否则它变成仅仅CCD_ 4而不是CCD_。