Redux-Saga Получение неопределенного для componentDidMount ()

Question

Я создаю компонент React, который в основном должен получать данные из базы данных и загружать в таблицу

AdminActions \ index.js // Мое действие

import {
    SHOW_MESSAGE,
    HIDE_MESSAGE,
    GET_NON_ACTIVE_USERS,
    GET_NON_ACTIVE_USERS_SUCCESS,
} from "constants/ActionTypes";



export const getNonActiveUsers = (options) => {
    return {
        type: GET_NON_ACTIVE_USERS,
        payload: options
    };
};

export const getNonActiveUsersSuccess = (users) => {
    return {
        type: GET_NON_ACTIVE_USERS_SUCCESS,
        payload : users
    };
};


export const showSuccessMessage = (message) => {
    return {
        type: SHOW_MESSAGE,
        payload: message
    };
};

export const hideMessage = () => {
    return {
        type: HIDE_MESSAGE,
    };
};

AdminReducers \ index.js // Мой редуктор

import {
    SHOW_MESSAGE,
    HIDE_MESSAGE,
    GET_NON_ACTIVE_USERS_SUCCESS,

} from "constants/ActionTypes";

const INIT_STATE = {
    alertMessage: '',
    showMessage: false,

};
export default (state = INIT_STATE, action) => {
    switch (action.type) {
        case GET_NON_ACTIVE_USERS_SUCCESS:{
            return {
                ...state,
                users: action.payload,
            }
        }
        case SHOW_MESSAGE: {
            return {
                ...state,
                alertMessage: action.payload,
                showMessage: true,
                loader: false
            }
        }
        case HIDE_MESSAGE: {
            return {
                ...state,
                alertMessage: '',
                showMessage: false,
            }
        }
        default:
            return state;
    } }

AdminSagas \ index.js // Моя сага

import {all, call, fork, put, takeEvery} from "redux-saga/effects";
import {
    GET_NON_ACTIVE_USERS,
} from "constants/ActionTypes";
import {showSuccessMessage,getNonActiveUsersSuccess } from "../../actions/AdminActions";
import{ base_url } from "../../../util/config";


const getNonActiveUsersRequest = async ({page,limit}) => {
    return await fetch(base_url+"/api/admin/getNonActiveUsers",
        {
            method: 'get',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json',
                'Authorization' : "Bearer " + JSON.parse(localStorage.getItem('user')).token
            }
        })
        .then(res => res.json())
        .then(data => {
            return data;
        })
        .catch(error => {
            return error;
        });
};

function* getNonActiveUsers(payload) {
    try {
        const response = yield call(getNonActiveUsersRequest,payload);
        if (response.message) {
            yield put(showSuccessMessage(response.message));
        } else {
            yield put(getNonActiveUsersSuccess(response));
        }
    } catch (error) {
        yield put(showSuccessMessage(error));
    }
};

export function* getNonActiveUsersCatcher() {
    yield takeEvery(GET_NON_ACTIVE_USERS, getNonActiveUsers)
}


export default function* rootSaga() {
    yield all([fork(getNonActiveUsersCatcher)
    ]);
}

Мой компонент

import React, {Component} from "react";
import {connect} from "react-redux";
import {Table} from "antd";

import {getNonActiveUsers, hideMessage} from "appRedux/actions/AdminActions/";


const columns = [{
    title: 'Name & Surname',
    dataIndex: 'fullName',
}, {
    title: 'Email',
    dataIndex: 'email',
}, {
    title: 'Phone',
    dataIndex: 'phone',
},{
    title: 'Activation Status',
    dataIndex: 'user_info.activationStatus',
}];



class ActivateInvestors extends Component {
    state = {
        data: [],
        pagination: {},
        loading: false
    };

    componentDidMount() {
       this.props.getNonActiveUsers();

    }


    render() {
      console.log(this.props.users);

        return (
            <Table
                columns={columns}
                rowKey={record => record._id}
                dataSource={this.props.users}
                pagination={this.state.pagination}
                loading={this.state.loading}
                onChange={this.handleTableChange}
            />
        );
    }

}



const mapStateToProps = ({admin}) => {
    const {loader,alertMessage, showMessage, users} = admin;
    return {loader,alertMessage, showMessage, users}
};



export default connect(mapStateToProps, {
    getNonActiveUsers,
    hideMessage,
})(ActivateInvestors);

Итак, первый вывод console.log не определен, и я не знаю, как профессионально решить проблему. Я могу справиться с проверками if, но я не хочу этого делать.

Выход:

Я могу получить данные успешно, но я не знаю, где назначить значения или вызвать функцию.

Answer 1

Вы должны использовать, если проверяет, потому что в первый раз, когда рендер вызывается, ваш пользовательский реквизит не определен.После того, как ваши редукторы присвоили значение, оно будет перерисованоК тому времени, когда вы увидите данные в журнале.

Примерно так я использую lodash здесь:

 if (!_.isEmpty(this.props.users)) {
      return (
        <Table
          columns={columns}
          rowKey={record => record._id}
          dataSource={this.props.users}
          pagination={this.state.pagination}
          loading={this.state.loading}
          onChange={this.handleTableChange}
        />
      );
    } else {
      return <p>Loading...</p>;
    }

Answer 2

Ваш первый файл console.log равен "undefined", поскольку к тому времени, когда функция рендеринга выполняется в первый раз, вы все еще извлекаете данные из конечной точки.Когда вы наконец извлекаете данные, вы видите повторную визуализацию компонента, а затем вы получаете значения, показанные в console.log.Вам нужно лучше объяснить, чего вы хотите достичь, чтобы мы могли помочь вам лучше.