如何构建反应应用程序以正确呈现组件？

Question

当用户在我的应用中创建任务时，我想显示一条信息性消息。我已经在 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>
    );
  }
}

TasksNew.js 呈现用户可以创建任务的表单的组件

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

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

一切都很好，除了用户导航到 /users/new 并返回后消息不会消失。只有在完全重新加载时它才会消失。现在我知道为什么会这样了：父组件的状态永远不会更新，并且 taskCreated 保持为真。

但是如何做到这一点呢？一旦用户导航到应用程序中的不同页面，如何让消息消失。我想在没有 redux 的情况下完成这个。

Answer 1

您需要的只是在任何应用程序路由更改后将父组件的状态 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>
    }
}