Это сводит меня с ума!Я перепробовал все эти приемы, чтобы эти данные отображались с использованием методов жизненного цикла для сравнения данных реквизита с текущим состоянием данных строки в моем компоненте, но, возможно, React Grid с реквизитом строки не обновляется, потому что я вижу консольжурнал строк с данными в моей консоли.У него есть данные, но в моей таблице отображается «нет данных», что означает, что когда моя таблица отображалась, должно быть, «нет данных».Теперь, если я внесу простые изменения в компонент, нажму «Сохранить», его обновления и бум, я увижу 3 записи в таблице.Что странно, сейчас в моей консоли 6 записей в массиве.
export default class Demo extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
columns: [
{ name: 'teamName', title: 'Team' },
{ name: 'profilePic', title: 'Avatar' },
{ name: 'score', title: 'Score' },
{ name: 'profileName', title: 'profileName' },
{ name: '', title: 'Rank' }
],
rows: [],
pageSizes: [5, 10, 15],
currentPage: 0,
loading: true,
counter: 0
};
}
componentWillMount() {
this.getRows();
}
componentDidMount() {
this.getRows();
}
getRows = () => {
this.setState({
rows: this.props.league
});
};
// static getDerivedStateFromProps(props, state) {
// if (props.league.length !== state.rows.length) {
// return {
// rows: props.league
// };
// }
// return null;
// }
// componentDidMount() {
// console.log("NP1::",this.props.league)
// this.setState({rows: this.props.league})
// }
// componentDidUpdate(nextProps, prevState) {
// if(nextProps.league!==prevState.rows){
// //Perform some operation here
// console.log("NP2::",this.props.league)
// this.setState({rows: this.props.league});
// this.classMethod();
// }
// }
// static getDerivedStateFromProps(nextProps, prevState){
// if(nextProps.league!==prevState.rows){
// console.log("NP::",nextProps.league)
// return{
// rows: nextProps.league
// }
// return
// }
// else return null;
// }
// componentDidUpdate(nextProps, prevState) {
// if(nextProps.league!==prevState.rows){
// //Perform some operation here
// console.log("NP2::",this.props.league)
// this.setState({rows: this.props.league});
// this.classMethod();
// }
// }
// componentWillReceiveProps(nextProps) {
// console.log("NP::",nextProps.league+"----"+this.props.league);
// if (nextProps.league !== this.props.league) {
// console.log("NP2::",nextProps.league)
// this.setState({rows: nextProps.league})
// }
// }
// componentWillUpdate(nextProps, nextState) {
// console.log("NP::", nextProps.league + "----" + this.state.rows);
// if (nextProps.league !== this.state.rows) {
// this.setState({ rows: nextProps.league })
// }
// }
render() {
const { rows, columns } = this.state;
console.log("STATEDATA::", this.state)
return (
<Paper>
<Grid
rows={rows}
columns={columns}
>
<RowDetailState />
<Table
cellComponent={Cell}
/>
<TableHeaderRow />
<TableRowDetail
contentComponent={RowDetail}
/>
</Grid>
{/* <PagingPanel /> */}
</Paper>
);
}
}
Я оставил комментарий в коде, чтобы вы могли видеть методы LF, с которыми я играл.Вот как выглядит первый рендер без данных и консольного журнала моих данных о состоянии, который содержит строки.
Мое начальное состояние строк - [], поэтому мы знаем, что setState произошло.Почему это не вызывает рендеринг в этом компоненте.Я видел некоторые сообщения об этом с Ag Grid, но есть ли какие-либо известные проблемы с сеткой React и ее корректным рендерингом?
Как уже упоминалось, в Vs-коде, если я просто сделаю возврат строки (или внесение каких-либо изменений) и сохранение.Обновление компонента.У меня будет 3 записи рендера и 6 в массиве консоли, как показано здесь.
Добавив это, вы сможете одновременно видеть реквизиты лиги.
Вот родительский компонент
class LeaguePage extends Component {
static propTypes = {
loadLeague: PropTypes.func.isRequired,
}
constructor(props) {
super(props)
this.state = {
};
}
componentWillMount() {
this.props.loadLeague();
}
render() {
console.log("LEAGUEPROPS::",this.props);
return (
<div className="g-row">
<div className="g-col">
<h1>LeaguePage</h1>
{/* <LeagueTable {...this.props} /> */}
<br />
<br />
<RgDetail {...this.props} rows={this.state.rows} />
<br />
<br />
{/* <RgTable /> */}
<br />
<br />
<br />
</div>
</div>
)
}
}
const mapStateToProps = (state, ownProps) => {
console.log("MYSTATE::",state)
return {
league: LeagueSelector(state),
}
}
const mapDispatchToProps = Object.assign(
{},
leagueActions
);
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(LeaguePage));
Селектор для лиги
import { createSelector } from 'reselect';
import _ from 'lodash';
var data = [];
export function getLeague(state) {
if (state.league) {
return state.league;
}
}
function transform(UserRecord) {
const outerObj = UserRecord[Object.keys(UserRecord)[0]];
data.push(outerObj);
return data
}
export function getSortedLeague(state) {
if (state.length > 1) {
state.map(x => transform(x));
return data;
}
else
return data;
}
//=====================================
// MEMOIZED SELECTORS
//-------------------------------------
export const LeagueSelector = createSelector(
getLeague,
getSortedLeague
);