Question

我的index.js文件看起来像这样。

<Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div>
        <Header title={"IBP"}/>
        <div className="container-fluid">
          <Route exact path="/" component={HomePage} />
          <Route exact path="/observation/list" component={App} />
        </div>

        <Footer />
      </div>
    </BrowserRouter>   </Provider>

<Header /> contain nav data.

<Footer /> contain footer data

标题包含导航链接，它看起来像这样

<li className="dropdown">
          <a href="#" className="dropdown-toggle" data-toggle="dropdown">Observation <span className="caret"></span></a>
          <ul className="dropdown-menu" role="menu">
            <li><NavLink to="/Observation/list">Observations</NavLink></li>
            <li><a href="#">Checklists</a></li>
            <li><a href="#">Datasets</a></li>
          </ul>
        </li>

HomePage组件和App组件具有在Header组件和Footer组件之间显示的数据。

现在的问题是：

如果我在＆＃34; /＆＃34;之间导航和＆＃34; /观察/列表＆＃34;组件未清除的商店数据。我希望，一旦我在＆＃34; /观察/列表＆＃34;从这里开始到＆＃34; /＆＃34;通过头部组件中的NavLink，所有数据必须从App组件中清除。

匿名行为：

如果我在Header组件Everthing Working Fine中用Href替换NavLink。

Answer 1

我通过使用componentWillunmount方法解决了上述问题，一旦给出componet unMount，它将清除你的状态。

>  componentWillUnmount(){
>        
>        //clear the page
> 
>       }

那些使用redux作为状态管理器的人，他们需要创建动作创建器，它将在reducers中将状态值设置为默认值。

Answer 2

实现这一目标的最简单方法是使用生命周期事件componentDidMount()。由于每次安装组件时都会触发此事件，因此您可以创建一个方法来清除状态（数据）并在componentDidMount（）中调用它。

componentDidMount(){
  //Clear your data
}

react-react-dom中的NavLink不清除先前加载的组件数据。

2 个答案: