Javascript 设定使用承诺

我试着用promise来填充react组件。我已经调试过，并且

componentWillMount（）

中的

this.setState（{items:items}）

语句在

render（）

之后被调用，因此render函数中的items数组总是空的。我还尝试使用了

componentDidMount（）

哪种方法是正确的

interface Props extends React.Props<ItemsListComponent> {
    isAddButtonClicked : boolean;
    newItem : string;
    }

    interface State {
      items : Array<ItemEntity>;
    }

    export class ItemsListComponent extends React.Component<Props, State> {

    constructor(props: Props) {
      super(props);
      this.state = {items: []};
    }

    public componentWillMount() {
      itemAPI.getAllItems().then((items) => {
           this.setState({items: items})
      });
    }

    render() {
     return(
      <div className="container">
        <div className="row">
          <ul className="list-group">
            {this.state.items.map((item : ItemEntity) =>
                // Each child in an array or iterator should have a unique "key" prop. React doc.
                <li className="list-group-item" key={item.id}>{item.task}</li>
            )}
          </ul>
        </div>
      </div>
     );
     }
    }

界面道具扩展了React.Props{
isAddButtonClicked：布尔值；
newItem：字符串；
}
界面状态{
项目：阵列；
}
导出类ItemsListComponent扩展React.Component{
建造师（道具：道具）{
超级（道具）；
this.state={items:[]}；
}
公共组件willmount（）{
itemAPI.getAllItems（）。然后（（项）=>{
this.setState（{items:items}）
});
}
render（）{
返回(

{this.state.items.map（（item:ItemEntity）=>
//数组或迭代器中的每个子级都应该有一个唯一的“key”prop.React doc。
{item.task}
)}

);
}
}

我会将

itemAPI.getAllItems（）放入组件的构造函数中。一旦项目到达，无论何时，状态都将更新，这将触发
render（）
我将把
itemAPI.getAllItems（）
放在组件的构造函数中。一旦项目到达，无论何时，状态都将更新，这将触发
render（）
创建方法“asyncUpdate（数据）{this.setState（数据）}”
在构造函数集中
'this.asyncUpdate=this.asyncUpdate.bind（this）'

在您承诺调用触发器“this.asyncUpdate（promisedData）”之后

应该有助于创建方法“asyncUpdate（数据）{this.setState（数据）}”
在构造函数集中
'this.asyncUpdate=this.asyncUpdate.bind（this）'

在您承诺调用触发器“this.asyncUpdate（promisedData）”之后

应该会从文档中得到帮助：
componentWillMount（）将在装入之前立即调用。它在render（）之前调用，因此在此方法中同步设置状态不会触发重新渲染。避免在此方法中引入任何副作用或订阅。
您应该能够在componentDidMount（）中提出请求。这样可以确保在状态更改时重新加载。如果仍然为空，则渲染中的贴图有可能返回空数组。确保正确格式化从api返回的项。响应的形式可能是
{items:[]}。
文档中的
componentWillMount（）在装载发生之前立即被调用。它在render（）之前调用，因此在此方法中同步设置状态不会触发重新渲染。避免在此方法中引入任何副作用或订阅。
您应该能够在componentDidMount（）中提出请求。这样可以确保在状态更改时重新加载。如果仍然为空，则渲染中的贴图有可能返回空数组。确保正确格式化从api返回的项。有可能响应的形式是
{items:[]}。
问题是当React呈现组件时，数据还不可用。在实践中，您的代码应该在组件或更高级别上防止这种情况：

render() {
  if(!this.state.items) return null; // or loading indicator, data has not returned yet
   return (<div className="container">
      ...
    </div>);
}

render（）{
如果（！this.state.items）返回null；//或加载指示符，则数据尚未返回
返回(
...
);
}
问题在于，React渲染组件时，数据还不可用。在实践中，您的代码应该在组件或更高级别上防止这种情况：

render() {
  if(!this.state.items) return null; // or loading indicator, data has not returned yet
   return (<div className="container">
      ...
    </div>);
}

render（）{
如果（！this.state.items）返回null；//或加载指示符，则数据尚未返回
返回(
...
);
}
根据调用API，最好在componentDidMount（）中完成

这与来自的答案相结合将为您提供最佳实现。
根据调用API，最好在componentDidMount（）中完成

这与来自的答案相结合，将为您提供最佳的实现