Question

大约一年前，我了解了React和Redux，直到最近才开始大量使用它们。我惊讶地发现React和Redux都有很多变化。

我注意到的第一件事是我不能再使用componentWillReceiveProps生命周期方法，它告诉我我需要使用一些奇怪的getDerivedStateFromProps方法，但实际上并不能解决我当前的问题。 / p>

基本上，我具有dispatches 3 actions-REGISTER_REQUEST，REGISTER_SUCCESS和REGISTER_FAIL的寄存器功能。我的userReducer中也有3个标记-registering，registered，registerError。

在我的Register组件中，我想执行以下操作：

当registering为true时，添加加载动画
当registering为假且registered为真时，将用户重定向到/profile路由
当registerError为true时，从redux store获取错误并将其设置在组件的state中。

我的第一种方法是：

componentWillReceiveProps() {
    if(this.props.user){
        if(this.props.user.registered && !this.props.user.registering){
            this.props.history.push("/jobs")
        }
    }

    if(this.props.user.registerError){
        this.setState({error: this.props.user.registerErrorMessage})
    }
}

哪个工作不符合我的预期。如上所述，它告诉我不再允许使用componentWillRecieveProps。

我的下一个猜测是使用componentDidUpdate方法，但是在该方法中，我无法调用setState，因为它会导致臭名昭著的state loop error。在此之前，我已经解决了该错误，但并非没有做过很多我不喜欢的骇人听闻的事情。

我确实通过创建一个history helper解决了这个问题，该问题使我能够从组件外部（注册功能）重定向用户，但最终导致react router及其它引起更多问题无法解决我将registerErrorMessage设置为组件state的问题。

那么在React和Redux中这样做的正确方法是什么？我真的想避免使用骇人听闻的技巧来解决这些问题，因为几乎总是会出现这些问题，并在以后将我咬在屁股上。

Answer 1

尽管我没有看到为什么您需要将错误消息保存为组件状态而不是仅仅从redux存储中获取错误并将其显示给用户的原因，但是您可以在内部调用this.setState componentDidUpdate功能但要避免状态更新和重新呈现的无限周期，您需要有条件地更新状态。

假设redux存储区中的registerError和组件状态中的error最初都是null，在componentDidUpdate函数中，检查this.state.error是否等于register是否来自redux存储错误。如果它们不相等，则更新状态。

componentDidUpdate(prevProps, prevState) {
    if (this.state.error != this.props.registerError) {
      this.setState({ error: this.props.registerError });
    }
}

演示：

在this demo中有一个Register组件，该组件调度一个操作以从jsonplaceholder API中获取用户。 HTTP请求启动时，将调度REGISTER_REQUEST操作，该操作会将redux存储中的registering状态设置为true。如果成功提取用户，则会调度REGISTER_SUCCESS操作。如果发生错误，将调度REGISTER_ERROR操作。发生错误时，该错误将保存在Register组件内部的状态中，并显示给用户。

要在发出HTTP请求时产生错误，我已将API URL从更改为

"https://jsonplaceholder.typicode.com/users/1"     // correct URL

到

"https://jsonplaceholder.typicode.com/user/1"     // incorrect URL

Answer 2

当props由于Redux存储中的更改而更改时，该组件将再次呈现。因此，您应该将此逻辑放入render函数中。由于调用setState将调用另一个渲染，因此您应该只使用props中的错误值，而不要保存在状态中。

Redux操作完成并更新Redux存储后如何触发回调？

2 个答案:

演示：