当前位置: 首页 > 知识库问答 >
问题:

Meteor-React:如何重新渲染在setState内的状态后Meteor.call回调完成?

周祺
2023-03-14

事件摘要:
我单击编辑按钮。
editForm()使用此.setState()和render()中的此.state显示表单。
上面的setState()将{this.state}作为我需要显示的值。
一旦我在表单中单击更新按钮,updateMessage()将激活,哪个Meteor.call包含回调选项。
这个回调函数有一个.setState()连接到我上面提到的{This.state}。

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

将{this.state}放入渲染()将在回调后显示。

下面是代码:我需要显示的是this.state.show\u error\u或\u noerror inside 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>
    )
  }
}

共有1个答案

高正初
2023-03-14

要在meteor中实现反应,请创建Tracker.dependency对象并使渲染依赖于它(参考)。

在构造函数中创建依赖项

var dep = new Tracker.Dependency;

让你的渲染依赖于它

dep.depend();

并在setState函数中调用

dep.changed();
 类似资料:
  • 问题内容: 从React DOCS: https://reactjs.org/docs/state-and- lifecycle.html 状态更新可能是异步的 React可以将多个setState()调用批处理到单个更新中以提高性能。 这是完全合理的。如果您具有类似下面的功能,则在每次调用时重新渲染效率很低 因此,在上述情况下,我期望React将所有3个调用分批处理成一个单独的重新渲染。而它确实

  • 首先,我尝试检查用户的id是否与DB中的ID匹配。如果是这样,那么为和设置一个新状态,但我收到以下警告

  • 问题内容: 我正在尝试使用setState()方法将容器中的React状态变量重置为默认值。但是出现以下错误 最后:超出最大调用堆栈大小。 我的代码如下: 当Redux状态的变量为true时,我正在调用resetMsg()。 我在其中调用resetMsg的代码(resetMessages的值最初为false,当它为true时,我需要重置React状态): 问题答案: 您可能要研究功能。根据官方文档

  • 我有一个带有两组按钮(功能和目标)的界面。当我点击一个按钮时,我希望它从一个团队转到另一个团队。我正在用react和redux实现这一点。我唯一的问题是,当状态更新并且我成功地记录了更新的状态时,除非我使用forceUpdate(),否则组件不会更新。我不明白的是,既然状态更新成功,组件不应该自动重新渲染吗? 一些js 正如您所看到的,当我单击一个按钮时,我触发updateLists函数,该函数将

  • 我正在用反应原生构建一个项目。我有一个动态的玩家列表,我希望用户能够编辑。 我想实现的是: 用户输入名称 用户按enter键 我们称之为addPlayer,它添加一个播放器 新的输入出现并得到关注(通过其他功能) 我得到的是: < li >用户输入姓名 < li >用户按enter键 < li >我们调用addPlayer来添加播放器 < li >键盘开始关闭一会儿,然后在新输入出现时重新打开。

  • 所以我有这个: 只是一个数组的数字例如然而没有给出正确的总数,但?我甚至放了一个超时延迟,看看这是否解决了问题。任何明显的还是我应该发布更多的代码?