У меня есть приложение React-Redux. Я хотел создать панель управления, на которой он будет отображать несколько одинаковых компонентов. Позвольте мне объяснить, как выглядит структура моего приложения в целом:
commonPage корневой компонент, содержащий в себе еще 2 компонента
CommonContent (который отображает таблицу)
CommonContentView (который отображает поля редактирования для соответствующей таблицы)
Каждый из этих компонентов выполняет запрос в своем конструкторе, которыйвозвращает данные
Мой веб-сайт Каждая страница отображает только один компонент за один раз, либо показывает CommonContent ИЛИ CommonContentView Компонент, который прекрасно работает.
Моя главная проблема, возникающая при многократном отображении одного и того же компонента на одной странице, - это структура компонентов панели мониторинга, которая отображает несколько CommonContent компонентов на одной странице
Позвольте мне поделиться кодомфрагмент из Dashboard компонентов
/dashboard.js
class Dashboard extends Component {
constructor(props, context) {
super(props, context);
this.url = this.props.match.url;
this.entity = this.url === '/' ? 'customers' : this.url.split('/')[1];
this.model = getModel(this.entity);
}
render() {
const { classes } = this.props;
return (
<Wrapper>
<FilterBar title={this.model.entity.title} entity={this.entity} history={this.props.history} />
<div className={classes.root}>
{this.model.entities.map(e => <DashboardItem entity={e.entity} table={e} />)}
</div>
</Wrapper>
)
}
}
./dashboardItem.js
render() {
let { classes } = this.props
return (
<Wrapper>
<FilterBar title={this.model.entity.title} entity={this.entity} history={this.props.history} dashboard={true} table={this.props.table} />
<div className={classes.root}>
<Card className={classes.card}>
<CardContent className={classes.content}>
<DashboardContent
model={this.model}
entity={this.entity}
formDialog={ref => (this.formDialog = ref)}
show={this.show}
handleUpdateFilters={this.handleUpdateFilters}
onRef={ref => (this.reload = ref)}
table={this.props.table}
/>
</CardContent>
</Card >
</div >
</Wrapper >
)
}
DashboardContent
/* eslint-disable */
// import CustomerView from "../pages/Material/customerView";
import React from 'react';
import actions from '../../actions/index';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import HTtable from '../../utils/dataTables/HTtable';
import { getQuery } from '../../utils/common/queries';
import FormDialog from '../../components/common/formDialog';
import * as F from '../../utils/common/functions';
import * as service from '../../services/customService';
import toast from '../../utils/common/toastr';
import Spinner from '../../components/common/spinner';
import * as R from 'ramda';
class DashboardContent extends React.Component {
constructor(props, context) {
super(props, context);
this.query = getQuery({ label: this.props.entity });
this.state = {
order: 'desc',
orderBy: 'id',
currentSelected: -1,
data: [],
meta: { count: 0 },
page: 0,
prevSkip: 0,
rowsPerPage: 10,
rowsPerPageOptions: [1],
dialog: {
state: false,
dialog: {
title: '',
desc: ''
}
},
entity: this.props.entity,
rawKeys: this.props.model.keys,
actions: this.props.model.actions,
reloadData: this.props.reloadData,
currentQuery: this.query,
spinner: true,
tableData: this.props.table.data,
table: this.props.table
};
this.query = R.isEmpty(F.getItem(this.props.entity).where)
? this.query
: F.addFilterWhere(this.state, F.getItem(this.props.entity).where);
this.props.common.getData(this.query);
}
componentDidMount = () => {
this.props.onRef(this);
};
componentWillReceiveProps = nextProps => {
if (nextProps.data !== this.props.data) {
if (nextProps.data.error) {
toast.error(nextProps.data.error.message);
if (nextProps.data.error.code === 401) {
F.removeSession();
this.props.history.push('/signin');
}
this.setState({ spinner: false });
} else {
this.setState({
currentQuery: this.query,
data: nextProps.data['records'],
meta: nextProps.data['meta'],
spinner: false
});
}
}
};
render() {
return (
<div>
<Spinner show={this.state.spinner} />
<FormDialog
formDialog={this.props.formDialog}
handleClick={this.handleClick}
{...this.state}
reloadData={this.reloadData}
state={this.state}
show={true}
/>
{/*<CreateForm ref={this.props.create} {...this.state} keys={this.state.create_keys} show={true}/>*/}
<HTtable
state={this.state}
props={this.props}
isSelected={this.isSelected}
handleRequestSort={this.handleRequestSort}
handleClick={this.handleClick}
displayData={this.displayData}
handleChangePage={this.handleChangePage}
handleMetaSkip={this.handleMetaSkip}
handleChangeRowsPerPage={this.handleChangeRowsPerPage}
handleDialog={this.handleDialog}
dashboard={'true'}
/>
</div>
);
}
}
DashboardContent.propTypes = {
// classes: PropTypes.object.isRequired
};
function mapStateToProps(state, ownProps) {
return {
data: state.data
};
}
function mapDispatchToProps(dispatch) {
return {
common: bindActionCreators(actions.dataActions, dispatch)
};
}
export default withRouter(
connect(
mapStateToProps,
mapDispatchToProps
)(DashboardContent)
);
Все вышеперечисленное прекрасно работает, когда я отображаю несколько таблиц на странице, она использует DashboardContent для каждой таблицы, которая отправляет запрос для каждого отдельного запроса, который обрабатывается с помощью приставки
, если отображаются две таблицына странице и 2 запроса отправляются, когда ответ получен, он сопоставляется с обеими таблицами вместо сопоставления данных с соответствующей таблицей
Я чувствую, что это происходит из-за избыточности, потому что при каждом запросе, который был сделан, они отображали свой ответ на однуdata var in state здесь ссылка из DashboardContent.js file
function mapStateToProps(state, ownProps) {
return {
data: state.data
};
}
function mapDispatchToProps(dispatch) {
return {
common: bindActionCreators(actions.dataActions, dispatch)
};
}
здесь на каждый запросответ этот mapStateToProps действует и отображает данные ответа на данные состояния, если он не обновляет эту конкретную таблицу, в которой DashboardContent.js запрос сделан
теперь, короче, у меня есть несколько DashboardContent.js с их собственными данными запроса, вот примерпытаясь объяснить несколько таблиц на странице, как ведет себя
`DashboardContent.js` -> contains query regarding users
`DashboardContent.js` -> contains query regarding rooms
`DashboardContent.js` -> contains query regarding units
теперь, когда запрос завершен для любого из этих запросов, например, я говорю, что запрос комнат решен, и данные комнат будут отображены во всех приведенных выше таблицах DashboardContent.js, которые должнысопоставлять данные только с соответствующей таблицей так же, как ведут себя все запросы, которые, в конце концов, разрешают запросы. Как правило, карты на таблицах - это изображение, которое показывает, что запрос к таблице инфекций завершается последним, и данные отображаются в обеих таблицах 
Надеюсь, я смог передать свой вопрос. Какие будут возможные решения для этого: нужно ли мне создавать каждое хранилище избыточности для отдельной таблицы или мне нужно создавать уникальные компоненты таблицы для каждой таблицы (которая будет менее динамичной)и против принципа СУХОЙ) другой, то этот шздесь еще я делаю неправильно Ваша помощь по этому вопросу будет полной, так как она находится в процессе выполнения рабочего проекта, быстрая помощь будет отличной