重定向时重新初始化类 [英] Re-initializing class on redirect

问题描述

我目前在 http://example.com/parentdir/module/2/

这个 URL 实际上加载 Module.js 类，如以下路线所示:

This URL actually loads the Module.js class as indicated in the following route:

<Route exact path={"/parentdir/module/:id"} component={Module} />

这包含在我的 index.js 文件中定义的 和 元素中.

This is contained within <BrowserRouter> and <Switch> elements as defined in my index.js file.

Module 类有一个 constructor 和 componentWillMount 方法.这些设置了记录#2 的初始详细信息和负载信息.到目前为止一切正常.

The Module class has a constructor and componentWillMount methods. These set up the initial details and load information for record #2. Everything works fine so far.

现在，我的问题是在 Module.js 的孙组件中，我使用以下重定向重定向到另一个页面，例如第 3 页:

Now, my problem is that in a grandchild component of Module.js I redirect to another page such as page 3 with the following Redirect:

return (
        <Redirect to="/parentdir/module/3/" />
)

构造函数或 componentWillMount 未运行，因此记录 #3 未正确加载.这是因为在加载记录 #2 时该组件已经加载到内存中了吗?重新加载 Module.js 以便正确加载记录 #3 的最佳方法是什么?我是否必须以某种方式重新初始化课程?或者我是否必须以某种方式将数据从孙组件传递回模块类?后一种方法似乎很乏味.

The constructor or componentWillMount do not run so record #3 does not properly load. Is this because this component is already loaded in memory from when record #2 was loaded? What is the best way to reload Module.js so it properly loads record #3? Do I somehow have to reinitialize the class? Or do I somehow have to pass the data from the grandchild component back up to the module class? The latter approach would seem to be tedious.

澄清一下，如果我直接访问 http://example.com/parentdir/module/3 在地址栏中一切正常，但如果我在 ReactJS 环境中重定向到同一个地址，它就无法正常工作.

Just to clarify, if I go directly to http://example.com/parentdir/module/3 in the address bar everything works properly, but if I redirect to this same address within the ReactJS environment it does not work properly.

更新

到目前为止，我的问题已经给出了两个答案.一种解决方案建议使用 componentWillReceiveProps.另一种解决方案建议将方法作为道具传递给孩子，然后传递给孙子.使用这些方法中的每一种都有利有弊还是只是偏好问题?

Two answers to my question have been given so far. One solution suggests using componentWillReceiveProps. The other solution suggests passing a method as a prop down to the child and then to the grandchild. Are there pros and cons to using each of these approaches or is it just a matter of preference?

推荐答案

id 以 this.props.params 的形式作为 prop 传递.id 因此您应该使用 componentWillReceiveProps 生命周期方法，该方法在每次 props 更改时运行，这就是您的情况.

The id is passed as a prop in the form of this.props.params.id so you should use the componentWillReceiveProps lifecycle method which runs everytime the props change which is what is happening in your case.

当您从 /parentdir/module/2 导航到 /parentdir/module/3 作为组件时，componentWillMount 方法将不会运行已经挂载.它只会在您从其他组件导航时运行(例如，当您直接导航时).

The componentWillMount method will not run when you navigate from /parentdir/module/2 to /parentdir/module/3 as the component is already mounted. It will only run when you navigate from some other component (when you go directly for example).

在你的 Module 组件中添加这个生命周期方法

In your Module component add this lifecycle method

componentWillReceiveProps(nextProps){
      if(nextProps.params.id != this.props.params.id){
          //load information etc (whatever you are doing in componentWillMount)
       }
}

发生的事情是，当它收到一组较新的 props 时，它会比较参数 id 是否已更改(所有路由参数都位于 params 对象在 props 中)，当它看到有变化时，它会执行逻辑.比较并不是真正必要的，您可以在 componentWillReceiveProps 方法中添加逻辑，但这将是低效的，因为每次 props 对象更改时都会调用它(可能不是id 参数).

What is happening is that when it receives the newer set of props it's comparing if the param id has changed (all route params live in the params object in props) and when it sees there is a change it carries out the logic. The comparison is not really necessary and you can add the logic as is in the componentWillReceiveProps method but that would be inefficient as it is called everytime the props object changes (might not be the id param at all).

这篇关于重定向时重新初始化类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！