Я отображаю Список пользователей, который я получаю из магазина Redux (я храню его в переменной data
). Загрузка пользователей в Redux выполняется асинхронно, поэтому на это требуется время, и мой список должен быть перерисован. Я фильтрую эти данные и сохраняю их в состоянии List и пытаюсь отправить их в виде реквизита на Table , но никогда не передает значение состояния на реквизиты моей таблицы .
const getData = data => {...}
class List extends React.Component {
constructor(props) {
super(props);
this.state = {
displayData: [],
};
}
static getDerivedStateFromProps(props) {
return props.data ? { displayData: getData(props.data) } : null;
}
shouldComponentUpdate(nextProps) {
const { data } = this.props;
return data === undefined && data !== nextProps.data;
}
render() {
const { displayData } = this.state;
return data ? <Table displayData={displayData} /> : <h1>Loading...</h1>;
}
}
const mapStateToProps = ({ data }) => ({
data: data.users,
});
export default connect(mapStateToProps)(List);
Верхний компонент:
class App extends React.Component {
componentDidMount() {
const { loadData, loadFromStorage } = this.props;
loadData();
}
render() {
return (
<Router history={history}>
<Header history={history} />
<Switch>
<Route path="/list" render={props => <List {...props} />} />
...
</Switch>
</Router>
);
}
}
}
const mapDispatchToProps = { loadData: LOAD_DATA };
export default connect(null, mapDispatchToProps)(App);
Он просто устанавливает состояние моего компонента List и никогда не передает никаких дополнительных реквизитов в Table при их изменении (я использую расширение React, и я проверил реквизиты и состояние)
Как я могу это исправить?
P.S .: Я не хочу, чтобы этот компонент перерисовывался каждый раз, когда я получаю новые реквизиты