Невозможно отобразить простой контент JSON в React-Redux - PullRequest
Новая
       1

Невозможно отобразить простой контент JSON в React-Redux

0 голосов
/ 13 июля 2020

Я пытаюсь использовать React-Redux для рендеринга содержимого небольшого JSON.

Я могу получить содержимое с помощью Action: (часть действий. js) 

export const getUsersCount = () => {
    return function (dispatch, getState) {
        connectBack.get('users/count', {
            headers: { 
                'Authorization': getState().current_user.token
            }
        })
        .then( response => {
            console.log(response.data)
            dispatch(countUsers(response.data))
        })
        .catch( error => {
            console.log('Count ', error)
        })
    }
}


export const countUsers= (users) => {
    return {
        type: 'COUNT_USERS',
        payload: users
    }
}

Консоль будет правильно отображать содержимое response.data (в данном случае: {users: 6}).

Затем я хочу отобразить его на простой странице, но это undefined, мне что-то не хватает ... 

import React from 'react'
import { connect } from 'react-redux'
import { getUnfulfilledCount, getUsersCount } from './../../tools/actions'


class Dashboard extends React.Component {

    
    render () {
        let statsUsers = this.props.usersCount()
        console.log(statsUsers)

    return(
            <div className="container">
                <div className="row">
                        Dashboard <br/>
                        Number of registered users: <br/>
                        {statsUsers}
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        usersCount: () => { dispatch(getUsersCount()) }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard)

В дополнение к этому у меня есть редуктор, установленный следующим образом: 

import * as actionTypes from './actionTypes'


const initialState = {
    users:[]
} 

const reducer = (state = initialState, action ) => {
switch (action.type) {
case actionTypes.COUNT_USERS:
                return {
                    ...state,
                    users: action.payload 
                }

Где actionTypes. js - : 

export const COUNT_USERS = 'COUNT_USERS'

Точный рендеринг из консоли: undefined Dashboard. js: 12 {users: 6} действий. js: 315 Очевидно, на дисплее переменная просто пропущена, поскольку statsUsers не определена : "Количество зарегистрированных пользователей:"

Ответы [ 2 ]

0 голосов
/ 15 июля 2020

Я думаю, ваша основная проблема заключается в том, как вы сопоставляете полученные данные с компонентом Dashboard. У вас есть пустой вызов mapStateToProps и ненужный вызов mapDispatchToProps. Я бы удалил последнее и сопоставил свойство users из магазина в реквизитах, где вы можете получить к нему доступ в компоненте Dashboard, а затем вместо этого визуализировать this.props.users.

Также обратите внимание, что имея свой render вызов функции usersCount, который соответствует вызову dispatch(getUsersCount()), вы делаете вызов API внутри своей функции render. Выполнение вызовов API во время рендеринга является большим запретом и должно выполняться в другом месте, например componentDidMount.

См. Рабочий Codepen здесь . Он переписывает маленький бит вашего кода и добавляет функцию эмуляции отложенного сетевого ответа.

0 голосов
/ 13 июля 2020

Кода недостаточно для понимания, Возможно, этот пример вам поможет. 

const myJsonData = [
  {0: {name: "Amoos John Ghouri"}},
  {1: {name: "GMK Hussain"}},
  {2: {name: "Talib Hussain"}}
];

class DemoApp extends React.Component {
  render() {
        const items = this.props.myJsonData.map((d,i) => (<li>{d[i].name}</li>));

    return (
      <div>
        <ul>
          {items}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(
  <DemoApp myJsonData={myJsonData} />,
  DemoAppDiv
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="DemoAppDiv"></div>
...