React Redux: как обновить счетчик голосов в React Redux.Ответ на JS-эквиваленты получен
здесь
Приведенный ниже код предназначен для обновления системы голосования.Он отлично работает, отображая результаты при загрузке страницы.
Вот моя проблема: мне нужно обновлять и понижать голос каждого пользователя в любое время, когда нажимаются кнопки «Голосование вверх» и «Голосование вниз» соответственно.
Тем не менее, когда я нажимаю кнопку Upvote для голосования внизу, в моем редукторе появляется ошибка, указанная ниже.
Uncaught (in promise) ReferenceError: items1 is not defined.
Эта ошибка возникает в разделе «Редуктор» для отправки повышающего и понижающего голосов при постоянной VOTE_SUCCESS_POST
В серверной части у меня есть php-код, который возвращает данные массива, как показано ниже.
Может ли кто-нибудь помочь мне с отображением значений массива и обновлением, например (повышение до 11 и уменьшение до 7)в зависимости от того, как проголосовал пользователь?
<?php
// Update user response on a post
$return_arr[]= array("upvote"=>"11", "downvote"=>"7");
echo json_encode($return_arr);
exit;
?>
Вот массив, возвращаемый API Call
[{"upvote":"11", "downvote":"7"}]
Вот код
import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { vActions } from '../_actions';
class VoteApp extends React.Component {
constructor(props) {
super(props);
this.state = {
us: 0
};
}
componentDidMount() {
this.props.dispatch(userActions.getVote());
}
handleupvote(person_id,person_vote) {
return (e) => this.props.dispatch(userActions.vote(person_id,person_vote));
}
handledownvote(person_id,person_vote) {
return (e) => this.props.dispatch(userActions.vote(person_id,person_vote));
}
render() {
const { post1, posts1 } = this.props;
return (
<div style={{background:'red'}} className="well col-md-12">
<p>Vote System in React Redux</p>
{posts1.items1 &&
<ul>
{posts1.items1.map((post1, index1) =>
<li key={post1.id}>
{post1.name} -- (Upvote: {post1.upvote})-- (downvote: {post1.downvote})
<br />
<input type="button" value="upvote" onClick={this.handleupvote(post1.id,1)} />
<input type="button" value="downvote" onClick={this.handledownvote(post1.id,1)} />
</li>
)}
</ul>
}
</div>
);
}
}
function mapStateToProps(state) {
const { posts1} = state;
const { post1 } = state;
return {
post1,
posts1
};
}
const connectedVoteApp = connect(mapStateToProps)(VoteApp);
export { connectedVoteApp as VoteApp };
Вот мой редуктор
import { userConstants } from '../_constants';
export function posts1(state = {}, action) {
switch (action.type) {
case userConstants.GETALL_REQUEST:
return {
// ...state,
loading: true
};
case userConstants.GETALL_SUCCESS:
return {
loading: false,
error: null,
items1: action.posts1
};
case userConstants.GETALL_FAILURE:
return {
error: action.error
};
// Reducer section for Sending upvote and down vote
case userConstants.VOTE_REQUEST_POST:
return {
...state,
items1: state.items1.map(post1 =>
post1.id === action.id
? { ...post1}
: post1
)
};
case userConstants.VOTE_SUCCESS_POST:
return {
...state,
items1: state.items1.map(post1 => {
if (post1.id !== action.id) {
//return { ...post1, upvote: action.posts1.items1[0].upvote, downvote: action.posts1.items1[0].downvote };
return { ...post1, upvote: items1[0].upvote, downvote: items1[0].downvote };
}
//return post1;
})
};
case userConstants.VOTE_FAILURE_POST:
return {
error: action.error
};
default:
return state
}
}