Javascript 处理回应和传入道具的最佳实践

对于redux，我们使用操作来处理crud操作。但我在某些方面卡住了。如果我们在组件内部发送异步请求。我们可以轻松应对。但当我们通过行动发送请求时，我们不知道发生了什么。请求发送成功吗？花了多少时间？返回什么样的响应？我们不知道

我将用样品来澄清这个问题

让我们更新一篇文章

onClick () {
    postsApi.post(this.state.post)        | we know how much time
        .then(res => res.data)            | has took to execute
        .then(res => {                    | request 
            console.log(res) // we have the response 
        })
        .catch(err => console.log(error))
}

但如果我们采取行动

onClick () {
    this.props.updatePost(this.state.post)  // we know nothing what will happen
}

或处理传入的道具。假设我有fetchPost（）操作来检索post

componentDidMount(){
    this.props.fetchPost()
}

render

方法和

componentdiddupdate

也将运行。很酷。但是如果我想通过传入的道具更新我的状态呢？我无法在

componentDidUpdate

方法中执行此操作。它导致无限循环

若我使用componentWillUpdate方法，那个么，一切正常，但我得到了这个警告

警告：componentWillReceiveProps已被重命名，并且未更新 推荐使用。将数据提取代码或副作用移动到 组件更新。如果在道具更改时更新状态， 重构代码以使用记忆技术或将其移动到静态 getDerivedStateFromProps

我不能对infinty循环使用

componentdiddupdate

方法。无论是

getDerivedStateFromProps

方法，因为每次状态更改时都会运行它

我是否应该继续使用

componentWillMethod

？否则，我应该使用什么以及为什么（为什么

componentWillMethod

不安全？

“既不使用getDerivedStateFromProps方法，因为每次状态更改时都会运行它。”-这有关系吗？通过在内部使用一个简单的条件，可以避免在每次

getDerivedStateFromProps

调用中设置状态

例如：

static getDerivedStateFromProps(props, state) {
   if (props.post !== state.post) { // or anything else
     return {
        post: props.post,
     };
   }

   return null;
};

---

无限循环不会发生。

以下是我处理此类情况的方法。我们可以对异步调用（如api调用）重新执行thunk。如果我们定义了回报承诺的行为会怎样？请检查下面的代码

actions.js
导出常量getToList=dispatch=>{
返回Axios.get（'SOME_URL'）。然后（res=>{
//采取行动
//返回结果
返回res.data；
});
}
TodoList.js
onClick=async（）=>{
const{GetTodoList}=this.props；
试一试{
常量数据=等待GetToList（）；
//成功的管理者
这是我的国家({
成功：没错，
数据
});
}抓住{
//故障处理程序
这是我的国家({
成功：失败，
数据：空
});
}
}
常量mapStateToProps=状态=>({
GetToList
});我认为在这种情况下我们可以使用redux thunk。如果我们分派一个异步函数而不是分派一个动作对象会怎么样？
如果我理解正确，您想做的是安全地更改您的本地状态，仅当例如
updatePost
成功时

如果确实是这样，只要更新成功，就可以在
updatePost
上传递回调函数并调用它

成功更新（）{
//做你的事
这个.setState（…）；
}
onClick（）{
this.props.updatePost（this.state.post，this.successfulUpdate）//我们不知道会发生什么
}

更新：

您还可以记住，如果您的操作返回一个承诺，那么您可以使用
然后
方法：

onClick（）{
this.props.updatePost（this.state.post）。然后（this.onCompleted，this.onRejected）
}
为什么我们不能理解如果使用redux操作会发生什么？您将使用一些成功或错误信息更新正在运行的存储，然后您将能够访问所连接组件中的这些值。请给我们看看你的行动代码。