Javascript ReactJS 0.14-使用承诺

好的，我正在将我的项目从在组件中使用简单的数据数组推进到对数据的API调用，并且由于生活中的事情总是这样，组件不再工作。API正在工作，我可以看到数据结果，但它只是没有在渲染中生成它们：

   // function 
   showMainTestimonial(clientId) {
    let results = [];
    let linkButtonNode = null;
    TestimonyApi.getAll()
        .then(function (data) {
            var data = data.data;

            if (data.showMore) {
                linkButtonNode = (
                    <div style={{ margin:15, width:'100%', textAlign:'center' }}>
                        <Link className="button" to={ data.testimonialsLink }>More Testimonials</Link></div>)
            }

            data.testimonials.map(function (testimony, index) {
                let commenter = null;
                let category = null;

                if (testimony.isMain && results.length === 0) {
                    if (data.showCommenterName) {
                        commenter = (
                            <div style={{ textAlign: 'right', fontSize: 16 }}>
                                <i>-- { testimony.commenter }</i>
                            </div>
                        );
                    }
                    if (testimony.category) {
                        category = (
                            <div style={{ textAlign: 'right', fontSize: 16 }}>
                                <i> { testimony.category }</i>
                            </div>
                        );
                    }

                    results.push(
                        <div id="TestimonialArea" key={ index }>
                            <div className="main" id="TestimonialZone">
                                <div id="TestimonialsFeed" className="NavFeed">
                                    <div className="testspcr"></div>
                                    <article className="lists">
                                        <h3>
                                            "{ testimony.title }"
                                        </h3>
                                        <div className="ReviewText">
                                            "{ testimony.comment }"
                                        </div>
                                        { commenter }
                                        { category }
                                    </article>
                                    { linkButtonNode }
                                </div>
                            </div>
                        </div>
                    )
                    console.log('results from function: ' + JSON.stringify(results))
                    return results;
                }
            });
        }.bind(this))
}

//函数
ShowMain推荐（客户ID）{
让结果=[]；
让linkButtonNode=null；
TestimonyApi.getAll（）
.then（功能（数据）{
var数据=data.data；
如果（data.showMore）{
linkButtonNode=(
（更多推荐）
}
数据.证词.地图（功能（证词，索引）{
让commenter=null；
设category=null；
if（demission.isMain&&results.length==0）{
if（data.showcomenterName）{
评论员=(
--{证词.评论员}
);
}
如果（证词类别）{
类别=(
{证词.类别}
);
}
结果：推(

正如你看到的数据，我只是在做一些愚蠢的事情

有什么想法吗

提前感谢。
您需要获取承诺的结果并将其置于状态，然后根据状态进行渲染

class Foo extends React.Component {
  constructor(){
    super();
    this.state = {data: null};
  }
  fetchTestimonial(clientId) {
    TestimonyApi.getAll()
      .then((x) => this.setState({data: x}))
  }
  render(){
    if (!this.state.data) return <div>Loading</div>
    return (
      <div>
        {this.state.data.map(f)}
      </div>
    )
  }
}

类Foo扩展了React.Component{
构造函数（）{
超级（）；
this.state={data:null}；
}
回执证明（客户ID）{
TestimonyApi.getAll（）
.then（（x）=>this.setState（{data:x}））
}
render（）{
如果（！this.state.data）返回加载
返回(
{this.state.data.map（f）}
)
}
}

注释：箭头函数是重要的，它确保<代码> > <代码>是正确的。然后回调。只考虑方法中的箭头函数，因为它避免了整个类型的bug。
 您需要接受承诺的结果并将其置于状态，然后呈现基于状态的渲染。

class Foo extends React.Component {
  constructor(){
    super();
    this.state = {data: null};
  }
  fetchTestimonial(clientId) {
    TestimonyApi.getAll()
      .then((x) => this.setState({data: x}))
  }
  render(){
    if (!this.state.data) return <div>Loading</div>
    return (
      <div>
        {this.state.data.map(f)}
      </div>
    )
  }
}

类Foo扩展了React.Component{
构造函数（）{
超级（）；
this.state={data:null}；
}
回执证明（客户ID）{
TestimonyApi.getAll（）
.then（（x）=>this.setState（{data:x}））
}
render（）{
如果（！this.state.data）返回加载
返回(
{this.state.data.map（f）}
)
}
}

注意：箭头函数是重要的，它确保代码<>代码>在回调中是正确的。只考虑方法中的箭头函数，因为它避免了整个类型的bug。
 <代码>见证词表。GETALLU/<代码> /承诺是“强>异步< /强>。这是对JavaScript和JavaScript的人来说非常普遍的问题。已广泛讨论：





在React的上下文中，数据可能应该是组件状态的一部分。与其返回
结果
（进入无效），不如更新状态：

this.setState({results});

这将导致组件重新渲染。在
render
方法中，改为访问
This.state.results

您可以在装入组件后通过调用方法“自动”开始提取。请参阅中的
componentDidMount


仅供参考，
render
方法不应该真正获取数据。它在数据更改后调用（因为组件的道具或状态更改）。也许阅读会帮助您更好地理解这一点。
TestimonyApi.getAll
/Promissions是异步的。。这是JavaScript新手经常遇到的问题，已经被广泛讨论过：





在React的上下文中，数据可能应该是组件状态的一部分。与其返回
结果
（进入无效），不如更新状态：

this.setState({results});

这将导致组件重新渲染。在
render
方法中，改为访问
This.state.results

您可以在装入组件后通过调用方法“自动”开始提取。请参阅中的
componentDidMount


仅供参考，
render
方法永远不应该真正获取数据。它是在数据更改后调用的（可能是因为组件的道具或状态更改）。也许阅读可以帮助您更好地理解这一点。
我解决了我的问题，重构代码可以让您更清楚地理解

基本上正如FakeRain所说，箭头功能是关键，尽管我想我不能很好地使用一般的散文/高海拔理论。不管怎样，对于其他挣扎的人来说

当您获取数据，然后计划将其映射到特定的html“片段”时，请将获取和映射拆分为两个不同的函数，并记住：

在API获取中使用arrow函数；（因为“this”）
调用API函数中的映射函数；（因为API调用是异步的）
绑定映射函数
将映射结果传递到状态
因此，举例来说：

componentDidMount() {
    this.getAPIData();
}


getAPIData（）{
TestimonyApi.getAll（）
然后（（response）=>{我解决了我的问题，重构代码使其更清晰易懂

基本上正如FakeRain所说，箭头功能是关键，尽管我想我不能很好地使用一般的散文/高海拔理论。不管怎样，对于其他挣扎的人来说

当您获取数据，然后计划将其映射到特定的htm时
showMainTestimonial(data) {
   let results = [];     
   data.map(function(item) {
   // do something with mapped data and push in results
   results.push (

    // customizing the mapping into whatever results you want

    )}.bind(this))  <--- don't forget to bind

  // pass your configured html into state now after mapping
  this.setState({results});
 }