我知道这个问题已被问过多次,但我似乎无法找到答案。我有一个名为 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] 删除。
我来说两句