流星反应:如何在Meteor.Call回调完成后在SetState内部的状态重新渲染



事件摘要:
我点击编辑按钮。
editform()使用this.setState()和this.state inside render()。
显示表单。
上面的setState()具有{this.state}作为我需要显示的值。
单击表单中的更新按钮后,updatemessage()激活,归纳包括回调选项。

此回调函数具有上面提到的{this.state}连接的this.setState()。

那么,如何使{this.state}在Meteor.call()回调和setState()之后显示?

-note- 提出{this.state} in render()将在回调后显示。

引起代码: this.state.show_error_or_or_noerror indedMessage()是我需要显示的。

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>
    )
  }
}

要在流星中实现反应性,创建一个跟踪器。依赖性对象并使您的渲染取决于它(参考)。

在构造函数中创建一个依赖性

var dep = new Tracker.Dependency;

并使您的渲染取决于它

dep.depend();

并在您的setState函数中调用此

dep.changed();

最新更新