Question

我想在用户在我的应用中创建任务时显示信息性消息。我现在已经做了一段时间的反应，但我无法想到显示消息后显示消息的逻辑。

这是当前的设置

App.js 使用反应路由器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。然后我将历史记录推送到根资源＆＃34; /＆＃34;。

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>
    }
}

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

1 个答案: