Question

我通过ID获得了一个用户个人资料。但是，当我尝试使用同一页面上的链接转到另一个用户的页面时，无法从URL中捕获新的ID。它被捕获在componentWillReceiveProps方法中，但是由于发生无限循环，因此无法从中调用数据库请求以获取ID上的数据。

如何从/ profile / 5cc6c0e743d02ff2860d8f20链接中获取新ID，以便更新组件，并且可以从数据库中获取数据并将其插入到组件中？

实际上，我需要从props.match.params.id获取道具并将它们传递给this.props.getUserById（this.props.match.params.id），而props.match.params.id是仅在componentWillReceiveProps方法中可用

String book_now_request = "{\"user_id\":\"key\",\"key\":\"value\",\"key\":\"value\"}"

Answer 1

仅在ID更改时重新加载用户：

if (nextProps.match.params.id !== this.props.match.params.id) {
    this.props.getUserById(nextProps.props.match.params.id);
}

Answer 2

产生无限循环的原因

由于componentWillReceiveProps会在prop发生更改时进行调用，因此会导致无限循环，因此，在这种功能下，如果您写那行this.props.getUserById(this.props.match.params.id)，它将获取旧用户（假设用户A）的信息，因为{ {1}}指旧道具，而this.props指新道具（假设用户B），因此您还是用户A。这时，nextProps指用户A，而this.props指用户B.因此，道具发生了变化，它再次获取了用户B，然后您陷入了无限循环。

解决方案

仅当两个ID都不相同且用户为nextProps而不是nextProps.props.match.params.id时才获取用户。

this.props

改进

我建议您对所有正在制作的新组件使用挂钩而不是基于类的组件。它使事情变得更简单。请参阅useEffect挂钩的文档，您将在其中提及仅当用户发生更改时才获取用户的参数。因此，if (nextProps.match.params.id !== this.props.match.params.id) { this.props.getUserById(nextProps.props.match.params.id); }和componentDidMount

只能做一件事

Answer 3

您将像这样使用ProfileUser组件

> library("reticulate")
> use_python("/Users/aviral.s/.pyenv/versions/3.5.2/envs/may21/bin/python3")
> source_python("athena/core/operation/jupyter_notebook.py")
Error in initialize_python(required_module, use_environment) :
  Python shared library not found, Python bindings not loaded.
> use_virtualenv("may21")
> source_python("athena/core/operation/jupyter_notebook.py")
Error in initialize_python(required_module, use_environment) :
  Python shared library not found, Python bindings not loaded.

在这样的组件中

通过< ProfileUser {...props} />和ID

KEY

无论何时更改密钥，都将重新呈现该组件。因此，它将从构造函数开始，并且每次在道具中都会有新的< ProfileUser key={this.props.match.params.id} id={this.props.match.params.id} {...props} />

路由器看起来像这样

ID

有关此信息的其他信息-检查此链接-https://dev.to/ganderzz/react-controlling-rendering-through-keys-274m

Answer 4

1-将id设置为状态变量 2- in组件将接收道具，检查nextProps.match.params.id是否与我们在步骤1中设置的ID相同，如果是，则不进行网络呼叫，否则再次设置ID并进行网络呼叫

Answer 5

比较，新旧道具只有在组件执行任何操作时才会获得用户新道具

componentWillReceiveProps(nextProps) {

    if (nextProps.match.params.id !== this.props.match.params.id ) {

        this.props.getUserById(this.props.match.params.id);

      }

反应获取网址更改

5 个答案: