反应获取 url 更改答案

【问题标题】：react fetch url changes反应获取 url 更改
【发布时间】：2019-05-21 12:36:05
【问题描述】：

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

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

其实我需要从props.match.params.id中获取props，然后传给this.props.getUserById(this.props.match.params.id)，而props.match.params.id是仅在方法 componentWillReceiveProps 中可用

class ProfileUser extends Component {    
    state = {
        user: {}
    };

    componentDidMount() {
        // When first time i load component it works fine, i call database and get info
        this.props.getUserById(this.props.match.params.id);
    }

    componentWillReceiveProps(nextProps) {
        // Here I get user information
        this.setState({user: nextProps.profile.user})
        // when I switch to another page with another ID this.props.match.params.id, this method works but I can't call this.props.getUserById(this.props.match.params.id); from here because an infinite loop appears
        // this.props.getUserById(this.props.match.params.id);
    }

    render() {
        console.log(this.state.user)
        return (<div></div>)
    }

【问题讨论】：

标签： reactjs url react-redux react-router

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

导致无限循环的原因

你会得到一个无限循环，因为componentWillReceiveProps 会在 prop 更改时调用，因此在这样的函数下，如果你写那行 this.props.getUserById(this.props.match.params.id)，它会获取旧用户（比如说用户 A）的信息，因为 this.props 指的是old props 而nextProps 指的是新的（假设是用户B），因此你又是用户A。此时，nextProps 指的是用户A，而this.props 指的是用户B。所以，props 发生了变化，它然后再次获取用户 B，然后您将进入无限循环。

解决方案

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

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

改进

我建议您对正在制作的所有新组件使用钩子而不是基于类的组件。它使事情变得更简单。请参阅 useEffect 挂钩的文档，您将在其中提到仅在用户更改某些内容时才获取用户的参数。所以只有一件事可以为componentDidMount 和ComponentWillReceiveProps 完成这项工作

【讨论】：

【解决方案3】：

您将像这样使用 ProfileUser 组件

< ProfileUser
{...props}
/>

像这样在这个组件中传递ID和KEY

< ProfileUser
key={this.props.match.params.id}
id={this.props.match.params.id}
{...props}
/>

每当键更改时，组件都会重新渲染。因此，它将从构造函数开始，并且您每次都会在道具中拥有新的ID

路由器看起来像这样

<Route
  exact
  path="/something/:id"
  render={(props)=> (
    <ProfileUser
      key={props.match.params.id}
      id={props.match.params.id}
      {...props}
    />
  )}
/>

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

componentWillReceiveProps(nextProps) {

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

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

      }

【讨论】：