活動總結:
我點擊編輯按鈕。
editForm()在render()中使用this.setState()和this.state顯示錶單。
上面的setState()將{this.state}作爲我需要顯示的值。
一旦我點擊窗體內的更新按鈕,updateMessage()就會激活,其中包含回調選項的Meteor.call。
此回調函數具有連接到上面提到的{this.state}的this.setState()。
那麼如何在Meteor.call()回調和setState()之後顯示{this.state}?
Meteor-React:如何在Meteor.call回調完成後在setState內的狀態上重新渲染?
-note-將{this.state}放入render()將在回調後顯示。
繼承人代碼:this.state.show_error_or_noerror裏面editMessage()是我需要顯示的。
constructor(props) {
super(props);
const messageContent = this.props.messageContent;
const username = this.props.username;
const articleTitle = this.props.articleTitle;
this.state = {
show_error_or_noerror: '',
messageContent: messageContent,
username: username,
articleTitle: articleTitle
};
this.editMessage = this.editMessage.bind(this);
this.updateMessage = this.updateMessage.bind(this);
}
updateMessage(event) {
event.preventDefault();
const messageId = this.props.messageId;
const messageContent = this.refMessage.value.trim();
Meteor.call('message.update', messageId, messageContent, (error) => {
if(error) {
this.setState({show_error_or_noerror: error.reason});
} else {
this.setState({show_error_or_noerror: 'Updated successfully.'});
}
});
}
editMessage(event) {
event.preventDefault();
const messageId = this.props.messageId;
this.setState({
['show_form'+messageId]: <form onSubmit={this.updateMessage}>
<textarea
ref={(textarea) => {this.refMessage = textarea;}}
defaultValue={this.state.messageContent}
/>
<h6>by {this.state.username}</h6>
<h6>Article: {this.state.articleTitle}</h6>
<button type="submit">Update</button>
<button onClick={this.hideForm}>Hide</button>
{this.state.show_error_or_noerror}
</form>
});
}
render() {
const messageId = this.props.messageId;
return (
<span className="message_updator">
<button onClick={this.editMessage}>Edit</button>
{this.state['show_form'+messageId]}
</span>
)
}
}
我把'DEP =新Tracker.Dependency;'作爲構造函數內的全局變量。
我把'dep.depend();'render()裏面。
我把'dep.changed()'放在'Meteor.call'回調的if else語句中。
注意到已更改。 –
我認爲這個問題與Meteor.call設計只能運行一次。這裏有兩個用於響應式流星調用的軟件包[流星響應方法](https://github.com/stubailo/meteor-reactive-method)和[流星調用](https://github.com/mnmtanish/meteor-調用/) – mutdmour
我刪除了'Meteor.call()',只使用'this.setState()'。它仍然沒有退縮,所以它不是流星問題。我使用反應來修復它。 –