反应路由器：this.props.params链接点击后未更新

Question

我正在用侧边栏建立一个简单的反应应用程序。从它，我想换出各种类别的应用程序。

我的路由器是这样的：

<Route path={path} component={App}> 
    <IndexRoute component={HomeView} /> 
    <Route path="/" component={HomeView} /> 
    <Route path="/manage" component={LoggedInView} /> 
    <Route path="/search/:topic" component={SearchView} /> 
    <Route path="/c/:category" component={CategoryView} /> 
    <Route path="*" component={ErrorView} type="404"/> 
</Route> 

在侧栏中我有一个这样的环节：在类别查看

<Link to={{ pathname: '/c/'+el.urlkey}} activeClassName="active"{el.title}</Link> 

最后，我有这个变量：

let queryParam = this.props.params.category; 

当我点击链接时，网址栏中的网址会更改，但类别不会。当我再次点击它时，类别也会改变。

如果我登录'queryParam'，我看到第一次点击时，它返回相同的值。只有在第二次点击后才会改变。

为什么第一次点击不会改变？我也尝试使用编程方式使用

this.props.router.push(url); 

但是问题仍然存在。 任何帮助，非常感谢！

• 编辑

这是类别查看

@pureRender 
 
class Category extends Component { 
 

 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     activeCategoryName: '', 
 
     activeCategory: {}, 
 
     availableTopics: {}, 
 
     ... 
 
    }; 
 
    } 
 
 

 
    componentWillReceiveProps() { 
 
    this.showCategory(); 
 
    } 
 

 
    componentWillMount(){ 
 
    this.showCategory(); 
 
    } 
 

 
    showCategory(){ 
 
    const self = this; 
 
    let queryParam = this.props.params.category; 
 
    const availableCategories = this.props.categories; 
 
    let matched = false; 
 

 
    const count = availableCategories.length - 1; 
 
    if(count === -1){ 
 
     this.setState({ 
 
     notFound: true 
 
     }); 
 
    } else { 
 
     filter(availableCategories, function (el, index) { 
 
     const categoryTitle = el.urlkey.toLowerCase(); 
 
     const activeLocale = self.props.activeLocale; 
 
     let title = null; 
 
     if (queryParam !== undefined) { 
 
      title = queryParam.toLowerCase(); 
 
     }

Answer 1

你看到旧数据，当您单击第二个时间的原因的代码，是因为componentWillReceiveProps在使用该信息更新this.props之前执行。更新的方法来做到这一点，而不是：

componentWillReceiveProps(nextProps) { 
    this.showCategory(nextProps); 
} 

showCategory(props) { 
    let queryParam = props.params.category; 
    // etc 
} 

在第一个方面没有显示出来，尝试通过this.props（与上面的变化）在一个componentDidMount代替componentWillMount。我意识到这导致一个新的渲染运行，但我不知道道具是否尚未初始化。如果这不能解决它，我认为你需要在你的过滤函数中调试细节，并看看是否调用了setState。

Answer 2

通过你的道具showCategory function这样，每当一个新的道具抵达到组件

componentWillReceiveProps(nextProps) { 
this.showCategory(nextProps); 
} 

componentWillMount(this.props){ 
this.showCategory(this.props); 
} 

showCategory(props){ 
const self = this; 
let queryParam = props.params.category; 
const availableCategories = props.categories; 
let matched = false; 

const count = availableCategories.length - 1; 
if(count === -1){ 
    this.setState({ 
    notFound: true 
    }); 
} else { 
    filter(availableCategories, function (el, index) { 
    const categoryTitle = el.urlkey.toLowerCase(); 
    const activeLocale = self.props.activeLocale; 
    let title = null; 
    if (queryParam !== undefined) { 
     title = queryParam.toLowerCase(); 
    } 

    if(categoryTitle === title && el.language === activeLocale){ 
     matched = true; 
     self.setState({ 
     activeCategoryName: categoryTitle, 
     activeCategory: el, 
     notFound: false, 
     isLoading: false, 
     isEmpty: false 
     }); 
    } else if(index === count && !matched){ 
     self.setState({ 
     isEmpty: true, 
     isLoading: false 
     }); 
    } 
    }); 
} 
}