Redux-Saga 在 componentDidMount() 上未定义

Question

我正在构建一个 React 组件，它基本上需要从数据库中获取数据并加载到 Table

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 // 我的 Reducer

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

你第一个console.log是"undefined"，因为第一次执行render函数的时候，你还在从端点获取数据。当您最终检索数据时，您会看到组件的重新渲染，然后您将获得 console.log 中显示的值。您需要更好地解释您想要实现的目标，以便我们更好地帮助您。

Answer 2

你必须使用 if 检查，因为第一次调用渲染时你的用户属性是未定义的。在你的 reducer 分配了值后，它将被重新渲染。届时您将在日志中看到数据。

像这样的东西我在这里使用 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>;
    }

Redux-Saga 在 componentDidMount() 上未定义

Redux-Saga Getting undefined on componentDidMount()

reactjs

redux-saga

react-redux