Question

我有一些react组件，并且我正在使用react-router进行路由。

在App.js中

componentDidMount() {
    HttpService.get("masterData")
      .then(response => {
        this.setState({
          masterData: response.data.masterData
        })
      .catch(e => {});
  }

render() {
    return (
      <Router>
        <Switch>
          <Route
            path="/viewAsset"
           component= {()=> <ViewAssetComponent masterData={this.state.masterData}/> }
          />
        //....
        </Switch>
     </Router>
    )
}

但是我的ViewAssetComponent正在构造两次，而componentDidMount也被调用两次，这是不期望的。

Answer 1

此行为是由于您的react-router路线上的组件呈现方法所致。

根据官方文档

使用组件道具时，路由器使用React.createElement 从给定的组件创建一个新的React元素。那意味着您向component属性提供了一个内联函数，您将在每个渲染器中创建一个新组件。这导致现有组件卸载和新组件安装，而不仅仅是更新现有组件。”

当App.js http调用完成时，App.js将重新渲染，这使得React路由器可以重新生成组件，因为路由的组件被定义为内联函数。该函数将被执行，<ViewAssetComponent/>将再次被构造。

所以理想情况下，最好的方法是将带有道具的组件放在<Route/>的渲染道具中。

      <Route
        path="/viewAsset"
        render={props => (
          <ViewAssetComponent{...props} masterData={this.state.masterData} />
        )}
      />

仅构造一次组件。

React组件在页面刷新时被构造两次

1 个答案: