流星+；React：在Meteor.call之后向DOM追加响应？

我是超级新的反应和相当新的流星

我正在对函数进行Meteor.call（'getTheThing'）。该函数正在获取一些信息，并将这些信息作为响应返回。在我的浏览器中，我可以看到该方法正在返回正确的信息（一个字符串），但是如何将该响应输入到DOM中呢

（如您所见，我尝试使用

ReactDOM.findDOMNode（this.refs.result）.html（response）；

，将其放置在DOM中，但随后我在控制台中遇到此错误：

调用“getTheThing”的结果时出现异常：TypeError:无法读取未定义的属性“result”）

App=React.createClass({
查找内容（事件）{
event.preventDefault（）；
var username=ReactDOM.findDOMNode（this.refs.textInput）.value.trim（）；
调用（“getTheThing”、用户名、函数（错误、响应）{
控制台日志（响应）；
ReactDOM.findDOMNode（this.refs.result）.html（response）；
});
ReactDOM.findDOMNode（this.refs.textInput）.value=“”；
},
render（）{
返回(
);
}
});
此
位于不同的上下文下，因此不包含此处的
参考。此外，不能为
Dom元素设置
html
。您需要更改为
Jquery元素

    var _this = this;
    Meteor.call("getTheThing", username, function(error, response){
      console.log(response);
      $(ReactDOM.findDOMNode(_this.refs.result)).html(response);
    });

尽管我建议您将响应设置为状态，并让组件重新呈现

为了一个完整的反应方式

App = React.createClass({
  getInitialState() {
      return { result: "" };
  },
  shouldComponentUpdate (nextProps: any, nextState: any): boolean {
      return (nextState['result'] !== this.state['result']);
  },
  findTheThing(event) {
    event.preventDefault();

    var username = ReactDOM.findDOMNode(this.refs.textInput).value.trim();

    Meteor.call("getTheThing", username, function(error, response){
      console.log(response);
      _this.setState({ result: response });
    });

    ReactDOM.findDOMNode(this.refs.textInput).value = "";
  },

  render(){
    return(
        <div className="row">
          <div className="col-xs-12">
            <div className="landing-container">
              <form className="username" onSubmit={this.findTheThing} >
                <input
                  type="text"
                  ref="textInput"
                  placeholder="what's your username?"
                />
              </form>
            </div>
            <div ref="result">{this.state['result']}</div>
          </div>
        </div>
      </div>
    );
  }
});

App=React.createClass({
getInitialState（）{
返回{result:：}；
},
shouldComponentUpdate（nextrops:any，nextState:any）：布尔值{
return（nextState['result']！==this.state['result']）；
},
查找内容（事件）{
event.preventDefault（）；
var username=ReactDOM.findDOMNode（this.refs.textInput）.value.trim（）；
调用（“getTheThing”、用户名、函数（错误、响应）{
控制台日志（响应）；
_this.setState（{result:response}）；
});
ReactDOM.findDOMNode（this.refs.textInput）.value=“”；
},
render（）{
返回(
{this.state['result']}
);
}
});
谢谢你的回答，但是我是否可以不用jquery来完成这项工作？尽管我建议您将响应设置为状态并让组件重新呈现，但您对
的理解是什么？
App = React.createClass({
  getInitialState() {
      return { result: "" };
  },
  shouldComponentUpdate (nextProps: any, nextState: any): boolean {
      return (nextState['result'] !== this.state['result']);
  },
  findTheThing(event) {
    event.preventDefault();

    var username = ReactDOM.findDOMNode(this.refs.textInput).value.trim();

    Meteor.call("getTheThing", username, function(error, response){
      console.log(response);
      _this.setState({ result: response });
    });

    ReactDOM.findDOMNode(this.refs.textInput).value = "";
  },

  render(){
    return(
        <div className="row">
          <div className="col-xs-12">
            <div className="landing-container">
              <form className="username" onSubmit={this.findTheThing} >
                <input
                  type="text"
                  ref="textInput"
                  placeholder="what's your username?"
                />
              </form>
            </div>
            <div ref="result">{this.state['result']}</div>
          </div>
        </div>
      </div>
    );
  }
});