Блог

Я пытаюсь создать компонент React с использованием REST API-заполнителя JSON, используя redux в качестве API управления состоянием. Я могу видеть, как действие отправляется в redux logger, но каким-то образом, когда я пытаюсь получить доступ к измененным состояниям через свойство компонента, я получаю ‘this.props.user’ не определено в окне консоли браузера. Пожалуйста, найдите мой код ниже :

Reducer:

 import {FETCH_DATA} from  '../Actions/actionTypes';

const initialState={
    userlist:[]
}

function jphReducer(state=initialState,action){
      switch(action.type){

          case FETCH_DATA:
              
              state={
                  ...state,
                  userlist:action.payload
              }
            
            break;
          default :
             state;
      }
      return state;
}

export default jphReducer;

  

Экшен:

 import axios from 'axios';
import {FETCH_DATA} from  '../Actions/actionTypes';

 export  const  getjphData = () => async dispatch => {
      await  axios.get("https://jsonplaceholder.typicode.com/users").then(
          response => {
               dispatch({
                  type:FETCH_DATA,
                  payload:response.data
                  
              });
          },
          reason => {
              dispatch({
                  type:FETCH_DATA,
                  payload:reason
              });
          }
      );
 }
  

MainComponent:

 import React,{Component} from 'react';
import {getjphData} from  '../app/Actions/jphAction';
import { connect } from 'react-redux';
import jphReducer from '../app/Reducers/jphReducer';
import propTypes from "prop-types";
import { FETCH_DATA } from './Actions/actionTypes';

 class MainComponent extends Component{

    constructor(props){
        
        super(props);
        
    }
    componentDidMount(){
        
        this.props.getData(); 
        
           
    }
     render(){
        
         return(
            
               <div>
                
                 <table>
                     <thead>
                     <th>
                         <td>ID</td>
                         <td>name</td>
                         <td>username</td>
                         <td>Email</td>
                     </th>
                     </thead>
                     <tbody>
                    {
                        
                        this.props.users.map((user) =>
                          <tr>
                              <td>{user.id}</td>
                              <td>{user.name}</td>
                              <td>{user.username}</td>
                              <td>{user.email}</td>
                          </tr>
                        )
                    }
                     </tbody>
                 </table>
                
             </div>
             
         );
           
         
     }
 }

 const mapDispatchToProps = dispatch => ({
    getData :  dispatch(getjphData())
    
});

const mapStateToProps = state => ({
    
    
        users: state.userlist
    
});

export default connect(mapStateToProps,mapDispatchToProps)(MainComponent);

  

Корневой компонент :

 import React,{Component} from 'react';
import {Provider} from 'react-redux';
import {jphStore} from  './jphStore';
import MainComponent from './MainComponent';
import { connect } from 'react-redux';

export default class RootComponent extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <Provider store={jphStore}> 
                <MainComponent/>
            </Provider>
        );
    }
}

  

Ваш users.map пытается запуститься сразу, даже до того, как будет выполнен запрос на получение пользователей, поэтому, чтобы убедиться, что это props.users определено, прежде чем пытаться сопоставить его, добавьте условие перед ним следующим образом this.props.users amp;amp; this.props.users.map...

Ваше tbody сообщение должно выглядеть следующим образом

       <tbody>
          {
              this.props.users amp;amp; this.props.users.map((user) =>
                  <tr>
                      <td>{user.id}</td>
                      <td>{user.name}</td>
                      <td>{user.username}</td>
                      <td>{user.email}</td>
                  </tr>
              )
          }
       </tbody>