reactjs - 从同一组件内部调用时，React Router "Link to"不会加载新数据

Question

背景

我正在构建一个具有以下详细信息的应用程序

• react
• react 路由器
• 还原
• 它是通用的 JavaScript
• 节点js

问题

当使用 Link 标签在组件之间进行路由时，它可以完美地工作。它调用组件所需的数据并呈现页面。但是，当我单击使用与当前组件相同的组件的 Link 时，我看到的只是 url 更改。

尝试

我尝试过一些事情来让它发挥作用。

尝试 1

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

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

但是变量 nextProps 始终与当前 props 相同。

尝试 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);
}

所以这个测试

• 有以前的 Prop 吗？
• 然后这些 props 是否等于之前的 props？
• 如果存在则返回 false
• 如果没有，那么我们会看到比较 props 和之前的 props 参数

在 ComponentDidUpdate 中

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

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

结论

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