javascript - 单击 Like 按钮后重新渲染 React 组件(使用 Redux)

Question

我有以下 React 组件，它通过“renderPosts”方法显示所有用户的帖子。在它下面有一个喜欢/不喜欢的按钮，用于显示当前登录的用户是否喜欢该帖子。

但是，当我单击赞按钮时，组件不会重新呈现以便“renderPosts”方法创建一个不同的按钮，并且“赞字符串”会按预期进行修改。只有当我转到另一个组件然后返回到该组件时，才会显示不同的按钮，反之亦然。

无论如何，我可以在我的应用程序中使用 Redux 解决这个问题吗？我在 onClick 事件后尝试了 this.forceUpdate 但仍然不起作用...

根据 robinsax，我还尝试创建一个名为“likers”的新 Reducer，它基本上获取了喜欢特定帖子的用户数组，并将其作为 props 导入到组件中，但得到了

"this.props.likers.includes(currentUser)" is not a function

当应用程序第一次到达主页面(PostIndex)时，可能是因为 this.props.likers 仍然是从 reducer 返回的空对象

这是我的 Action 创建者的代码:

export function likePost(username,postId) {
    // body...
    const request = {
        username,
        postId
    }
    const post = axios.post(`${ROOT_URL}/likePost`,request);
    return{
        type: LIKE_POST,
        payload: post
    }
}
export function unlikePost(username,postId){
    const request = {
        username,
        postId
    }
    const post = axios.post(`${ROOT_URL}/unlikePost`,request);
    return{
        type: UNLIKE_POST,
        payload: post
    }
}

这是我的 reducer :

import {LIKE_POST,UNLIKE_POST} from '../actions/index.js';

export default function(state = {},action){
    switch(action.type){
        case LIKE_POST:
            const likers = action.payload.data.likedBy;
            console.log(likers);
            return likers;
        case UNLIKE_POST:
            const unlikers = action.payload.data.likedBy;
            console.log(unlikers);
            return unlikers;
        default:
            return state;
    }
}

我非常感谢任何帮助，因为我是初学者

import { fetchPosts } from "../actions/";
import { likePost } from "../actions/";
import { unlikePost } from "../actions/";
class PostsIndex extends Component {
    componentDidMount() {
        this.props.fetchPosts();
    }
    renderPost() {
        const currentUser = Object.values(this.props.users)[0].username;
        return _.map(this.props.posts, post => {
            return (
                <li className="list-group-item">
                    <Link to={`/user/${post.username}`}>
                        Poster: {post.username}
                    </Link>
                    <br />
                    Created At: {post.createdAt}, near {post.location}
                    <br />
                    <Link to={`/posts/${post._id}`}>{post.title}</Link>
                    <br />
                    //error here, with this.props.likers being an 
                    //array
                    {!this.props.likers.includes(currentUser) ? (
                        <Button
                            onClick={() => this.props.likePost(currentUser,post._id)}
                            bsStyle="success"
                        >
                            Like
                        </Button>
                    ) : (
                        <Button
                            onClick={() => this.props.unlikePost(currentUser,post._id)}
                            bsStyle="warning"
                        >
                            Unlike
                        </Button>
                    )}{" "}
                    {post.likedBy.length === 1
                        ? `${post.likedBy[0]} likes this`
                        : `${post.likedBy.length} people like this`}
                </li>
            );
        });
    }
function mapStateToProps(state) {
    return {
        posts: state.posts,
        users: state.users,
        likers: state.likers
    };
}
}

Answer 1

似乎喜欢/不喜欢的帖子功能不会导致您的 state 或 props 发生任何变化，因此组件不会重新呈现。

您应该更改正在存储的数据结构，以便 post.likedBy.includes(currentUser) 的值包含在其中一个中，或者 forceUpdate() likePost 和 unlikePost 调用之后的组件。

请按照第一种方式进行，这样我晚上就可以 sleep 了。让组件的 render() 受到不在其 props 或 state 中的事物的影响违背了使用 React 的目的.