Question

我正在渲染用户列表，该列表是从Redux商店获得的（我将其存储在变量data中）。将用户加载到Redux是异步的，这就是为什么要花一些时间并且我的列表必须重新呈现的原因。我过滤了这些数据并将其保存在列表的状态下，并尝试将其作为道具发送到 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扩展，并且检查了道具和状态）我该如何解决？
附注：我不希望此组件在每次获得新道具时都重新渲染

Answer 1

尝试删除“ data === undefined”，同时返回this.state.data !== nextState.data，请按照以下方式操作：

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

我不知道如何为化简文件中的data属性设置化简的默认状态。如果化简文件中数据的初始状态为{}，[]或null，则您的代码将阻止组件更新。

同样，在您的情况下，表仅从状态中获取数据，而不从props中获取数据。状态重置后，this.props和nextProps可能已经相等，因此最好使用this.state。

反应的状态值不传递给道具

1 个答案: