Reactjs 如何构造react应用程序以正确呈现组件？

我想在用户在我的应用程序中创建任务时显示一条信息性消息。我已经在react中工作了一段时间，但我想不出显示一次之后消失的消息的逻辑

这是当前的设置

App.js 使用react router dom路由到不同页面的主要组件，如下所示：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      taskCreated: false,
    };
  }

  showTaskCreatedAlert = () => {
    this.setState({ taskCreated: true });
  };

  render() {
    return (
        <Router>
          <div>
            <Switch>
              <Route 
                exact 
                path="/" 
                component={props => <TasksIndex {...this.state} />} 
              />
              <Route
                path="/users/new"
                component={props => (
                  <TasksNew
                    showTaskCreatedAlert={this.showUserCreatedAlert}
                    {...props}
                  />
                )}
              />
            </Switch>
          </div>
        </Router>
    );
  }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
taskCreated:false，
};
}
showTaskCreatedAlert=（）=>{
this.setState（{taskCreated:true}）；
};
render（）{
返回(
} 
/>
(
)}
/>
);
}
}

TasksNew.js 组件，用于呈现用户可以在其中创建任务的窗体

成功创建任务后，我更新父组件（App.js）上的状态，并将taskCreated设置为true。然后将历史推送到根资源“/”

TasksIndex.js 呈现用户创建的所有任务的组件 此组件获取作为道具传递给它的主组件状态，并根据taskCreated设置为true还是false，它将显示该信息消息

一切都很好，只是在用户导航到/users/new并返回后，消息不会消失。只有在完全重新加载后，消息才会消失。现在我知道了发生这种情况的原因：父组件的状态从未更新，taskCreated仍然为真

---

但是如何做到这一点呢？当用户导航到应用程序中的另一个页面时，我如何才能让消息消失。我希望在不进行重新复制的情况下实现这一点。

您需要的是，在任何应用程序路由更改后，将父组件的状态taskCreated更改为false。您可以通过订阅浏览器历史记录来完成此操作：

import createBrowserHistory from 'history/createBrowserHistory'

const history = createBrowserHistory()

class App {
    constructor(props) {
         super(props);
         this.state = {
             taskCreated: false,
         };
    }

    showTaskCreatedAlert = () => {
         this.setState({ taskCreated: true });
    };

    componentDidMount() {
         // listen for changes of location
         this.unlisten = history.listen((location, action) => {
              this.setState({ taskCreated: false });
         });
    }
    componentWillUnmount() {
         // Remove your listener when your component is destroyed
         this.unlisten();
    }
    render() {
        <Router history={history}>
            // ...
        </Router>
    }
}

从“历史记录/createBrowserHistory”导入createBrowserHistory
const history=createBrowserHistory（）
类应用程序{
建造师（道具）{
超级（道具）；
此.state={
taskCreated:false，
};
}
showTaskCreatedAlert=（）=>{
this.setState（{taskCreated:true}）；
};
componentDidMount（）{
//倾听位置的变化
this.unlisten=history.listen（（位置、动作）=>{
this.setState（{taskCreated:false}）；
});
}
组件将卸载（）{
//当您的组件被销毁时删除侦听器
这是我的；
}
render（）{
// ...
}
}

我认为此链接将帮助您解决问题。首先，使用Route的“渲染”道具而不是“组件”.其次，我想知道您是否可以使用TasksIndex的componentWillUnmount将taskCreated设置回false？我的应用程序组件从不卸载。只装载/卸载内部组件。此外，您永远不应该在componentWillUnmount中调用setState。卸载组件时删除任何侦听器是一种很好的做法，即使您的应用程序没有此用例尚未完成。“history.listen”调用将返回一个unsubscribe函数并将其设置为this.unlisten属性。稍后，在组件卸载中，“this.unlisten（）”正在删除历史侦听器，它将不会调用setState。