如何在 ajax 调用后更新子组件状态答案

【问题标题】：How to update a child component state after an ajax call如何在 ajax 调用后更新子组件状态
【发布时间】：2015-10-13 02:47:46
【问题描述】：

为了学习 React + Flux，我正在构建一个简单的撰写框，其中段落被分解为多条推文，然后通过单击一个按钮，您可以发布一系列推文。高级应用程序具有以下组件：

<div>
     <ComposeBox tweetParaText={this.state.tweetParaText} ref='composeBox' />
     <DisplayTweets tweetCollection={this.state.tweetCollection} ref='displayTweets' />
     <TweetButton signedInSignature={this.state.signedInSignature} ref='tweetButton' />
</div>

完成文本的撰写后，单击 TweetButton。 TweetButton 有 4 个 UI 状态：

准备就绪（显示推文按钮）
推文（在这种情况下，我会显示加载 gif 并将文本从“Tweet”更改为“Tweeting..”）
推文成功（在这种情况下，我想将按钮的文本恢复为“推文”，隐藏 ajax laoder gif 并显示消息“推文发送成功！”持续 7 秒。）
错误（在这种情况下，我想将按钮的文本恢复为“Tweet”，隐藏 ajax 加载程序 gif 并显示错误消息）

这些状态是推文按钮独有的，与我存储在商店中的应用程序状态不同。

TweetButton组件的onclick如下：

 _onClick:function(){
    this.setState({buttonState:tweeting});
    ActionCreator.tweet(this.props.tweetCollection,this.props.signedInSignature);
}

在此处更改状态时，会发生此状态的 UI 更改，因为这就是组件的编写方式。但是，在这之后我有点难过。

数据流是单向的，完成后的操作会向 store 发送一个事件，该事件会更新其状态，从而更新 ComposeBox 组件的状态。但是如何以及在哪里设置 TweetButton 组件的状态？我应该为此写一个不同的商店吗？还是有更好的方法来实现这一点？

【问题讨论】：

标签： reactjs reactjs-flux flux

【解决方案1】：

我对通话的状态/状态使用相同的存储。

假设您的通话结果将存储在 _Tweets = {};在 TweetStore 对象中。

我像这样在商店内唯一地注册结果（我猜不是强制性的）

_Tweets["someresultid/tag"] = {
    data: result.data,
    status: result.status
}

TweetStore 正在监听 2 个事件：案例：“正在加载”和案例：“ReceiveResults/answer/wtv”

当用户发起呼叫时，您将在呼叫的同时调度“加载”。然后，当它收到答案时，您发送“答案”。

您的视图正在监听您的商店的任何更改，当发生更改时，回调将检查状态并相应地重新呈现（主控、错误或结果）。

希望对你有帮助

【讨论】：