Question

我有一个类似

的URL结构

foo.com/details/:id

并与其一起使用ReactRouter。如果您搜索ID“ 123”，则该组件会从数据库中呈现特定信息，并将URL更新为

foo.com/details/123

如果您搜索另一个ID“ 456”，则网址将更新为

foo.com/details/456

与this.props.history.push(${this.state.id});

简而言之

-组件重新呈现。如果您重新加载或直接使用带有URL的ID，则该参数将按预期工作。不过，这是我的问题：如果在浏览器中按返回按钮，则URL会正确更新（456 => 123），但该组件不会重新呈现。

当URL参数更改时，如何强制组件重新呈现？

编辑：更多代码

在构造函数中：

 if (this.props.match.params.id !== undefined) {
            this.state.id = this.props.match.params.id;
            this.getData(this.state.id)
}

在班上：

 <form onSubmit={this.handleSubmit}>
  <input type="text" className="form-control mx-sm-3 mb-2" placeholder="Enter ID"value=             
         {this.state.id} onChange={this.handleChange}/>
  <input type="submit" value="Search" className="btn btn-primary mb-2"/>
</form>

handleChange(event) {
      this.setState({id: event.target.value})
}

handleSubmit(event) {
      this.props.history.push(`${this.state.id}`);
      this.getData(this.state.id);
      event.preventDefault();
}

Answer 1

道具更改时组件不会重新呈现。因此，当已经安装了ID为123的组件并将ID更新为456时，将不会触发重新渲染。您将必须通过更新状态来触发更新。我建议您使用componentDidUpdate而不是componentWillReceiveProps，因为它被标记为UNSAFE，这意味着它在以后的React版本中可能会被弃用。您可以componentDidUpdate或componentShouldUpdate。以下是使用componentDidUpdate的实现。

componentDidUpdate(prevProps, prevState) {
  if (this.props.match.params.id !== prevProps.match.params.id) { 
     this.setState({ id: this.props.match.params.id}); 
     this.getData(this.props.match.params.id);
    // or any other logic..
  }
}

Answer 2

当url指向same component时，不会卸载并重新安装组件，而是将具有不同道具的相同组件传递给它。这里没有几种方法可以实现所需的行为。

如果能够在已安装的根元素上指定key（使用ID）。（键应位于使用Id并执行某些操作的元素上，而不能与在里面）。如果找不到正确的元素来实现这一目标，请继续下一个。

利用componentWillReceiveProps并比较nextProps id和currentProp id并编写逻辑以重新定义组件的逻辑新的ID。

componentWillReceiveProps(nextProps) {
 if (this.props.id !== nextProps.id) {
   // write your logic to update the component with new ID 
 }
}

ReactJS-向后导航时重新渲染相同的组件

2 个答案: