当从同一组件内部调用时，React Router“Link to”不会加载新数据

Question

背景

我正在使用以下详细信息构建应用

• 反应
• 反应路由器
• 终极版
• 是通用的javascript
• node js

问题

使用Link标记从组件到组件进行路由时，它可以完美地运行。它调用组件所需的数据并呈现页面。但是，当我点击使用与当前组件相同的组件的Link时，我看到的是网址更改。

的尝试

我试图让它发挥作用。

尝试1

到目前为止，我已经尝试了this问题中的步骤，但解决方案对我不起作用。这是我实施的代码

componentWillReceiveProps(nextProps) {
    if (nextProps.article.get('id') !== this.props.article.get('id')) {
        console.log('i got trigggerd YESSSSSSSSSSSSSSS');
    }
}

但变量nextProps始终与当前道具相同。

尝试2

我决定调用我在componentWillMount中使用的相同代码，但这也不起作用。

componentWillMount() {
    let { category, slug } = this.props.params;
    this.props.loadArticleState({ category, slug });
} 

当我将它放入componentWillReceiveProps时，它只会创建一个无限循环。

结论

我认为问题是点击链接从不调用与之关联的数据。由于数据加载了

static fetchData({ store, params }) {
    let { category, slug } = params;
    return store.dispatch(loadArticleState({ category, slug }));
}

感谢任何帮助。

Answer 1

我使用的解决方案

我创建了一个函数来测试先前的数据是否与更改的数据相同。

compareParams(prevProps, props) {
    if (!prevProps || typeof prevProps.params !== typeof props.params) {
        return false;
    }
    return Object.is(props.params, prevProps.params);
}

所以这次测试

• 以前有道具吗？
• 然后如果道具等于之前的道具？
• 如果有的话，则返回false
• 如果没有，那么我们会看到比较道具和以前的道具参数

在ComponentDidUpdate

中

在compoonentDidUpdate我们使用此函数来确定数据是否应该更新

componentDidUpdate(prevProps) {
    if (this.compareParams(prevProps, this.props)) {
        return;
    }
    this.props[this.constructor.reducerName](this.props.params);
}

结论

如果接收到新数据，此代码会更新使用相同反应组件的页面主体。

Answer 2

也许您可以尝试在Route组件上使用onChange事件，检查Route API，然后向子组件发信号通知需要刷新...