我如何在ajax调用中使用响应来在react中的jsx中设置一个值，类似于Angular 2中的filter/pipes

我正在学习react，并希望将我的一个angular 2组件转换为react组件。我遇到了一个问题，在Angular 2中，我使用管道来转换模板中的文本变量，如下所示。

<span>{{ message.What | translate}}</span>

翻译管道从我的管道调用这个函数。ts文件

    @Pipe({
        name: "translate",
        pure:false
    })
    export class Translate implements PipeTransform{
        private headers = new Headers();
        private translated: string = null;
        private prevtext = '';
        constructor(private http: Http) {
            this.headers.append('Content-Type', 'application/x-www-form-urlencoded');
        }
        transform(text: string): string {
            if (text !== this.prevtext) {
                this.prevtext = text;
                this.translated = null;
                this.http.post('https://translate.yandex.net/api/v1.5/tr.json/translate?lang=es-en&key=trnsl.1.1.20160702T062231Z.b01e74e50f545073.41cbb76d976818cfaa0e1ac3ac78b561079e3420&text='+text,{},{headers:this.headers}).map((response:Response)=>{
                    return response.json();
                }).subscribe((data)=>{
                    this.translated= data.text[0];
                });
            }
            return this.translated;
        }
}

现在在react中，我将我的标记移动到js文件中，我的渲染看起来像这样

render() {
const { props, onScroll } = this;
return (
    <div className="message-content" ref="messageList" onScroll={ onScroll }>
      <ul className="message-list">
        { props.history.map((messageObj,index) => {
          const imgURL = '//robohash.org/' + messageObj.Who + '?set=set2&bgset=bg2&size=70x70';
          const messageDate = new Date(messageObj.When);
          const messageText = messageObj.What;
          const messageDateTime = messageDate.toLocaleDateString() +
              ' at ' + messageDate.toLocaleTimeString();
          var classes = 'message-item avatar' ;
          var me = props.userID == messageObj.Who ? ' me':'';
          classes = classes + me;
          return (
              <li className={classes} key={ messageObj.When }>
                <div className="tint"><img src={ imgURL } alt={ messageObj.Who } className="circle" /></div>
                <span className="title">Anonymous robot #{ messageObj.Who }</span>
                <p className="message-text">
                  <span>{props.translate(messageText)}</span>
                </p>
                <span className="message-date">{ messageDateTime }</span>
              </li>
          );
        }) }
      </ul>
    </div>
);

}

道具。将调用

translate = (msg,index) =>{
    const { props } = this;
    $.ajax({
      url:'https://translate.yandex.net/api/v1.5/tr.json/translate?lang=es-en&key=trnsl.1.1.20160702T062231Z.b01e74e50f545073.41cbb76d976818cfaa0e1ac3ac78b561079e3420&text='+msg,
      method:"POST",
      data:JSON.stringify({"input":msg}),
      contentType: 'application/x-www-form-urlencoded',
      crossDomain:true
    }).success((data)=>{
        //set variable to data
    }).error((error)=>{
      console.log(error);
    });
  }

 }

我卡住的地方是，在angular 2中，我在回调中设置了变量，angular会跟踪变化并更新值。我想知道我该如何反应。我见过状态改变之类的例子，但没有一个展示了如何从对象数组中更新对象属性的值。如有任何帮助，不胜感激