Question

我发现自己在这里有点死胡同。我会尽力解释。

我在我的应用程序上使用基本用户名路由，这意味着website.com/username将路由到用户名的个人资料页面。除了下面要解决的一个问题之外，一切都正常。

这就是我的做法（非常简短的版本）：

此路由查找潜在的用户名并呈现分发组件。

<Route exact path="/([0-9a-z_]+)" component={Distribution} />

分发组件然后从路径名中提取潜在的用户名...

username = {
  username: this.props.location.pathname.substring(1)
};

...然后将其触发到我的API，该API会检查该用户名是否确实存在并属于有效用户。如果这样做，它将返回一个用户对象，否则返回一个错误。

if (username) {
  axios
    .post(API_URI + '/users/get/profile', JSON.stringify(username))
    .then(res => {
      this.setState({
        ready: true,
        data: res.data,
        error: ''
      });
    })
    .catch(err => {
      this.setState({
        ready: true,
        data: '',
        error: err.response
      });
    });
}

以上所有情况都在componentWillMount内部发生。

然后我将相关的状态信息作为道具传递给render中的相关子组件：

render() {
  if (this.state.ready) {
    if (this.state.data) {
      return <UserProfile profile={this.state.data} />;
    }
    if (this.state.error) {
      return <Redirect to="notfound" />;
    }
  }
  return null;
}

正如我所提到的，当在所有其他路由/组件之间移动时，这一切都可以完美地工作，但是当已经在Distribution组件中时调用Distribution组件时，它将失败。例如，如果您已经在查看有效的配置文件（位于“分发”>“用户配置文件”中），然后尝试查看另一个配置文件（或任何其他格式错误的用户名路径，这会引发错误），则API调用不会再次触发，因此状态不会在“分发”组件中更新。

我本来是通过Redux商店设置的，但是却有完全相同的问题。我错误地认为，componentDidMount会在每次首次调用该组件时触发，并且我认为向其抛出新的url会导致该错误，但是不会。

我尝试了多种方法来完成这项工作（componentWillReceiveProps等），但我只是想不通。我尝试的所有操作都会引发深度错误。

我是在这里错过了神奇的拼图还是只是没有看到真正明显的东西？

我会完全以错误的方式进行操作吗？

Answer 1

当您尝试使用componentWillReceiveProps时，您将走在正确的道路上。我会做以下事情：

componentDidMount() {
    this.refresh()
}

componentWillReceiveProps(prevProps) {
    if(prevProps.location.pathname !== this.props.location.pathname) {
        this.refresh(prevProps)
    }
}

refresh = (props) => {
    props = props || this.props
    // get username from props
    // ...
    if (username) {
        // fetch result from remote
    }
}

React：如何重新渲染SAME组件？

1 个答案: