У меня есть кнопка голосования с количеством голосов, и когда я нажимаю кнопку голосования, я вижу /- без правильного количества голосов. Я жестко закодировал число до 12, и я могу голосовать за или против.

Хотя я не знаю, как динамически заполнить кнопку реальным значением API для счетчика.

Вот правильные значения из вызова API, расположенного в компоненте: count={api.voteScore} также обратите внимание на редуктор / действие SET_VOTE_COUNT

Вот код:

API fetch.js

 import React, {Component} from 'react'; import AddButton from './AddButton' class Posts extends Component { constructor(props) { super(props); this.state = { response: '' }; } componentDidMount() { getPostAsync('/posts').then(data ={amp}gt; this.setState({ response: data })); } render() { return ( {amp}lt;div className="App"{amp}gt; {amp}lt;header className="App-header"{amp}gt; {amp}lt;img src={logo} className="App-logo" alt="logo" /{amp}gt; {Array.isArray(this.state.response) {amp}amp;{amp}amp; this.state.response.map(api ={amp}gt; {amp}lt;{amp}gt; { api.voteScore} {console.log(api.voteScore)} {amp}lt;AddButton className="voting" count={api.voteScore} /{amp}gt; {amp}lt;p{amp}gt; { api.title }, by { api.author } {amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; { api.body } {amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; {api.category} {amp}lt;/p{amp}gt; {amp}lt;/{amp}gt; )} {amp}lt;/header{amp}gt; {amp}lt;/div{amp}gt; ) } } async function getPostAsync(api) { let response = await fetch(api); let data = await response.json() return data; } export default Posts; 

AddButton.js

 import React from 'react'; import { connect } from 'react-redux'; const mapDispatchToProps = dispatch ={amp}gt; { return { // dispatching plain actions setVoteCount: () ={amp}gt; dispatch({ type: 'SET_VOTE_COUNT', count: '12' }), } } const AddButton = props ={amp}gt; ( {amp}lt;div className="voting"{amp}gt; {amp}lt;button onClick={() ={amp}gt; { console.log(props.setVoteCount(props.count)); }}{amp}gt; Vote {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; ); export default connect(null, mapDispatchToProps)(AddButton); 

action.js

 export const setVoteCount = (id) ={amp}gt; { return { type: "SET_VOTE_COUNT", count: '', id }; } 

reducer.js

 import { createStore, applyMiddleware, compose } from 'redux'; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const change_counter = (state = {}, action) ={amp}gt; { switch (action.type) { case "SET_VOTE_COUNT": if (state.id !== action.id) { return state; } return { ...state, } case "INCREMENT": if (state.id !== action.id) { return state; } return { ...state, count: parseInt(state.count)   1 }; case "DECREMENT": if (state.id !== action.id) { return state; } return { ...state, count: parseInt(state.count) - 1 }; default: return state; } }; let nextId = 0; const counters = (state = [], action) ={amp}gt; { switch (action.type) { case "ADD_COUNTER": return [...state, {id: nextId  , count: 0}]; case "SET_VOTE_COUNT": return [...state, {id: nextId  , count: action.count}]; case "INCREMENT": return state.map(counter ={amp}gt; change_counter(counter, action)); case "DECREMENT": return state.map(counter ={amp}gt; change_counter(counter, action)); default: return state; } } export default createStore(counters, composeEnhancers(applyMiddleware())); 

заранее спасибо

Используйте useSelector реагировать на useSelector чтобы получить значение из хранилища внутри функционального компонента. Вы также можете использовать useDispatch вместо connect .

Я также рекомендую добавить redux-thunk для создания асинхронных действий.

actions.js

 async function getPostAsync(api) { let response = await fetch(api); let data = await response.json() return data; } export const setVoteCount = (id) ={amp}gt; { return { type: "SET_VOTE_COUNT", count: '', id }; } export const fetchVoteCount = () ={amp}gt; { return function (dispatch) { getPostAsync('/posts').then(data ={amp}gt; { dispatch(setVoteCount(data)); })); }; } 

AddButton.js

 import { useDispatch, useSelector } from 'react-redux'; import React from 'react'; export default function AddButton(props) { const dispatch = useDispatch(); const voteCount = useSelector(state ={amp}gt; state.count); return ( {amp}lt;div className="voting"{amp}gt; {amp}lt;button onClick={() ={amp}gt; { dispatch({ type: 'SET_VOTE_COUNT', count: voteCount   1 }) }}{amp}gt; Vote {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; ); }