У меня есть следующий компонент React, который показывает все сообщения пользователей с помощью метода "renderPosts".Под ней есть кнопка «Нравится / не нравится» о том, понравился ли зарегистрированному в данный момент пользователю пост.
Однако, когда я нажимаю кнопку «Мне нравится», компонент не выполняет повторную визуализацию, чтобы метод «renderPosts» создал непохожую кнопку, а строка «Мне нравится» изменяется, как и ожидалось.Только когда я перехожу к другому компоненту, а затем возвращаюсь к этому компоненту, кнопка непохожего отображается и наоборот.
Можно ли как-нибудь исправить это с помощью Redux в моем приложении?Я попробовал this.forceUpdate после события onClick, но все еще не работает ...
Также я попытался создать новый Reducer, называемый "likers", в соответствии с robinsax, который в основном получает массив пользователей, которым нравится конкретный пост.и импортировал его как реквизиты в компонент, но получил
"this.props.likers.includes(currentUser)" is not a function
Когда приложение впервые попадает на главную страницу (PostIndex), возможно, потому что this.props.likers по-прежнему пустой объект, возвращаемый из редуктора
Вот код для моего создателя действия:
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
};
}
}