数据更改后 React Redux 不呈现

杰夫

我知道这个问题已被问过多次,但我似乎无法找到答案。我有一个名为 DynamicTable 的组件,它将 JSON 呈现为数据表。它已经在多个其他页面中进行了测试并且可以正常工作。在这里,我已将其放入 React-Bootstrap 选项卡容器中。数据拉取工作正常,但在提取完成后页面不会重新呈现。

这是我正在使用的代码

//RetailRequests.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import FormComponent from '../Elements/FormComponent';
import TabContainer from 'react-bootstrap/TabContainer';
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';
import DynamicTable from '../Elements/DynamicTable';

const mapStateToProps = (state) => {
    return {
        RequestData: state.RetailRequests,
        siteMap: state.siteMap
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        Retail_Request_Fetch: () => { return dispatch(Retail_Request_Fetch()) },
        Retail_Request_Insert: (data) => { return dispatch(Retail_Request_Insert(data)) },
        Retail_Request_Delete: (id) => { return dispatch(Retail_Request_Delete(id)) },
        Retail_Request_DeleteAll: () => { return dispatch(Retail_Request_DeleteAll()) }
    }
}

class RetailRequests extends Component {

    constructor(props) {
        super(props);
        
        var roles = props.siteMap.siteMapData.userRoles.toLowerCase();
        this.state = {
            showAdmin: roles.indexOf('admin') >= 0 || roles.indexOf('systems') >= 0
        }
    }

    componentDidMount() {
        this.props.Retail_Request_Fetch();
    }
// ...

    render() {
        let rows = this.buildData();
        let data = this.props.RequestData?this.props.RequestData.adminData:null;

        return (
            <div style={{ transform: 'translateY(10px)' }} >
                <TabContainer>
                    <div className='col-md-10 offset-1' >
                        <Tabs defaultActiveKey='general' id='retail_reports_tab_container' >
                            <Tab eventKey='general' title='Enter New Request'>
                                <h1> Retail Requests</h1>
                                <FormComponent rows={rows} submit={this.submitFn} />
                            </Tab>
                            <Tab eventKey='admin' title='Admin' disabled={!this.state.showAdmin}>
                                <h1>Manager Data</h1>
                                <DynamicTable
                                    data={data}
                                    border="solid 1px black"
                                    title={"Retail Requests Admin"}
                                />
                            </Tab>
                        </Tabs>
                    </div>
                </TabContainer>
            </div>
        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(RetailRequests);
//RetailRequestsCreator.js

export const Retail_Request_Fetch = () => (dispatch, getState) => {

    var init = JSON.parse(JSON.stringify(fetchInit()));//copy to not modify the original
    var myReq = new Request(`${process.env.REACT_APP_HOST}/Retail_Request`, init);

    dispatch({
        type: ActionTypes.REQUESTS_LOADING
    })

    return fetch(myReq)
        .then((response) => {
            if (response.ok) {
                return response;
            }
            else {
                var error = new Error("Error " + response.statusText);
                error.response = response;
                throw error;
            }
        }, (error) => {
            var err = new Error(error.message);
            throw err;
        })
        .then((response) => { return response.json() })
        .then((RequestData) => {
            if (RequestData !== "False") {
                console.log(RequestData)
                dispatch({
                    type: ActionTypes.REQUESTS_LOADED,
                    payload: RequestData
                })
            }
            else CurrentPage_Update({ componentId: 'NotAllowed' });
        })
        .catch((err) => {
            dispatch({
                type: ActionTypes.REQUESTS_FAILED,
                payload: "Error: " + err.message
            })
        });
}
//RetailRequestReducer.js
import * as ActionTypes from '../ActionTypes';

export const retailRequests = (state = {
    isLoading: true,
    errMess: null,
    currentPage: []
}, action) => {
    switch (action.type) {
        case ActionTypes.REQUESTS_LOADED:
            return { ...state, isLoading: false, errMess: null, adminData: action.payload };
        case ActionTypes.REQUESTS_LOADING:
            return { ...state, isLoading: true, errMess: null, adminData: {} };
        case ActionTypes.REQUESTS_FAILED:
            return { ...state, isLoading: false, errMess: action.payload, adminData: null };

        default:
            return state;
    }
}

我确信这里面有一些简单的东西,但我得到的唯一错误是我正在使用的数据 this.props.RequestData 是未定义的,尽管在获取之后我在 Redux 中获得了正确的状态更改。

观察员

看起来你有问题 mapStateToProps

const mapStateToProps = (state) => {
    return {
        RequestData: state.retailRequests, // use lower case for retailRequests instead of RetailRequests
        siteMap: state.siteMap
    }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章