Question

Error image错误具体指出：

dispatch({
   type: SET_POSTS,
   payload: res.data
})

下面是我的功能代码：

export const getPosts = () => dispatch => {
    dispatch({ type: LOADING_DATA })
    axios.get('/posts')
        .then(res => {
            dispatch({
                type: SET_POSTS,
                payload: res.data
            })
        })
        .catch(err => {
            dispatch({
                type: SET_POSTS,
                payload: []
            })
        })
};

我检查了导入，console.log（res），一切似乎都很好，但是错误始终指向dispatch（）

编辑：使用redux开发工具跟踪代码后，我发现SET_POSTS的有效负载一直从payload:[{...}]变为未定义。下面，我附上了我的减速器的代码。我仍然不知道问题出在哪里。

import { SET_POSTS, LIKE_POST, UNLIKE_POST, LOADING_DATA } from '../types';

const initialState = {
    posts: [],
    post: {},
    loading: false,
};

export default function (state = initialState, action) {
    switch (action.type) {
        case LOADING_DATA:
            return {
                ...state,
                loading: true
            };
        case SET_POSTS:
            return {
                ...state,
                posts: action.payload,
                loading: false,
            };
        case LIKE_POST:
        case UNLIKE_POST:
            var index = state.posts.findIndex((post) => post.postId === action.payload.postId);
            state.posts[index] = action.payload;
            // conditional from github
            if (state.post.postId === action.payload.postId) {
                state.post = action.payload;
            }
            return {
                ...state
            };
        default:
            return state;
    }
}

在此处呈现getPosts（）函数：

import { getPosts } from '../redux/actions/dataActions';

class home extends Component {

    componentDidMount() {
        this.props.getPosts();
    }
    render() {
        const { posts, loading } = this.props.data;
        let recentPostsMarkup = !loading ? (
            posts.map(post => <Post key={post.postId} post={post} />)
        ) : (<p>loading...</p>);
return (
            <Grid container spacing={5}>
                <Grid item sm={8} xs={12}>
                    {recentPostsMarkup}
                </Grid>
                <Grid item sm={4} xs={12}>
                    <Profile />
                </Grid>
            </Grid>
        );

home.propTypes = {
    getPosts: PropTypes.func.isRequired,
    data: PropTypes.object.isRequired,
}

const mapStateToProps = state => ({
    data: state.data
});
export default connect(mapStateToProps, { getPosts })(home);

这是Post.js文件在post文件中传递的home.js文件。

class Post extends Component {
    likedPost = () => {
        if (this.props.user.likes && this.props.user.likes.find(
            like => like.postId === this.props.post.postId)
        ) return true;
        else return false;
    };
    likePost = () => {
        this.props.likePost(this.props.post.postId);
    }
    unlikePost = () => {
        this.props.unlikePost(this.props.post.postId);
    }
    render() {
        dayjs.extend(relativeTime);
        const {
            classes,
            post: { body, createdAt, userImage, userHandle, postId, likeCount, commentCount },
            user: {
                authenticated
            }
        } = this.props;
        const likeButton = !authenticated ? (
            <MyButton tip="Like">
                <Link to="/login">
                    <FavoriteBorder color="primary"/>
                </Link>
            </MyButton>
        ) : (
            this.likedPost() ? (
                <MyButton tip="Undo like" onClick={this.unlikePost}>
                    <FavoriteIcon color="primary"/>
                </MyButton>
            ): (
                <MyButton tip="Like" onClick={this.likePost}>
                    <FavoriteBorder color="primary"/>
                </MyButton>
            )
        )
        return (
            <Card className={classes.card}>
                <CardMedia
                    image={userImage}
                    title="Profile Image" className={classes.image} />
                <CardContent className={classes.content}>
                    <Typography
                        variant="h5"
                        component={Link}
                        to={`/users/${userHandle}`}
                        color="primary">
                        {userHandle}
                    </Typography>
                    <Typography variant="body2" color="textSecondary">
                        {dayjs(createdAt).fromNow()}
                    </Typography>
                    <Typography variant="body1">
                        {body}
                    </Typography>
                    {likeButton}
                    <span>{likeCount} Likes</span>
                    <MyButton tip="comments">
                        <ChatIcon color="primary" />
                    </MyButton>
                    <span>{commentCount} comments</span>
                </CardContent>
            </Card>
        )
    }
};

Answer 1

Ciao，这是React中一个众所周知的问题。请检查此guide（即使是为React Native制作的）。简而言之，您的问题与如何导入组件有关，而与数据的分发无关。

错误：元素类型无效：预期为字符串或类/函数，但得到：未定义

1 个答案: