【发布时间】：2019-05-22 08:48:28
【问题描述】：
我有以下 React 组件，它通过“renderPosts”方法显示所有用户的帖子。在它下方有一个喜欢/不喜欢按钮，用于显示当前登录的用户是否喜欢该帖子。
但是，当我单击like 按钮时，组件不会重新渲染，以便“renderPosts”方法创建一个不同的按钮，并且“like 字符串”按预期进行修改。只有当我转到另一个组件然后返回到该组件时，才会显示不同的按钮，反之亦然。
无论如何，我可以在我的应用程序中使用 Redux 解决这个问题吗？我在 onClick 事件之后尝试了 this.forceUpdate 但仍然不起作用...
我还尝试创建一个名为“likers”的新 Reducer，根据 robinsax，它基本上可以获取喜欢特定帖子并将其作为道具导入组件但得到的用户数组
"this.props.likers.includes(currentUser)" is not a function
app第一次到主页面（PostIndex）的时候，可能是因为this.props.likers还是reducer返回的一个空对象
这是我的动作创建者的代码：
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
}
}
这是我的减速器：
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
};
}
}
【问题讨论】：
-
能否也为
likePost()添加reducer代码？ -
我刚做了。感谢您的建议
-
喜欢或不喜欢之后的状态是什么？形状是对象结构。
-
你在说什么状态？如果你说的是likers状态，那么它就是一个数组。
标签： javascript reactjs redux