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>

最后在CategoryView中我有这个变量：

   let queryParam = this.props.params.category;

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

如果我记录了＆＃39; queryParam＆＃39;，我看到第一次点击时，它返回相同的值。只有在第二次点击后才会改变。

为什么第一次点击时它没有变化？我还尝试使用

以编程方式进行路由

 this.props.router.push(url);

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

EDIT

这是Categoryview的代码

＆＃13;

@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();
        }

＆＃13;

Answer 1

您第二次单击时看到旧数据的原因是因为componentWillReceiveProps在使用该信息更新res.redirect('verify/phone/'+phone)之前执行。更新方法以执行此操作：

app.post('/product/: productId/buy', (req, res) => {
  req.session.phone = phone;
});

app.get('/verify/phone', (req, res) => {
  console.log(req.session.phone);
});

就未出现的第一个而言，尝试在componentDidMount而不是componentWillMount中传递phone（带有上述更改）。我意识到这会导致一个新的渲染运行，但我想知道道具是否尚未初始化。如果它没有解决它，我认为你需要在你的过滤器函数中调试细节，看看是否正在调用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
      });
    }
  });
}
}

React Router：链接点击后，this.props.params未更新

2 个答案: