значение состояния реакции не передается реквизиту

Question

Я отображаю Список пользователей, который я получаю из магазина 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 .: Я не хочу, чтобы этот компонент перерисовывался каждый раз, когда я получаю новые реквизиты

Answer 1

Попробуйте удалить "data === undefined", также верните this.state.data !== nextState.data, выполните следующее:

shouldComponentUpdate(nextProps, nextState) {
    return this.state.data !== nextState.data;
}

Я не знаю, как вы устанавливаете состояние по умолчанию вашего редуктора для свойства данных наваш файл редуктора.Если исходное состояние данных в вашем файле редуктора равно {}, [] или null, ваш код будет препятствовать обновлению компонента.

Также в вашем случае ваша таблица принимает только данные из состояния, а не реквизиты.После сброса состояния this.props и nextProps могут быть уже равны, поэтому лучше использовать this.state.