約定を使用してsetState

Question

私は、反応コンポーネントを埋めるために約束を使用しようとしています。私はデバッグを行い、内のcomponentWillMount()が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> 
    ); 
    } 
    } 

Answer 1

Reactがコンポーネントをレンダリングするときにデータがまだ利用できないという問題があります。実際には、あなたのコードは、コンポーネントで、または上記のいずれかで、この警戒する必要がありますReact Documentation呼び出しのAPIによる

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

Answer 2

コンポーネントのコンストラクタにitemAPI.getAllItems()を入れます。アイテムが到着すると、いつ状態が更新され、これによりrender()がトリガーされます。コンストラクタで

Answer 3

方法 'asyncUpdate（データ）{this.setState（データを）}' を作成 は を設定する 'this.asyncUpdate = this.asyncUpdate.bind（この）'

そして、あなたの約束のコール・トリガー」の後this.asyncUpdate（promisedData「）

は、ドキュメントから

Answer 4

を助けるべきである：componentWillMount() is invoked immediately before mounting occurs. It is called before render(), therefore setting state synchronously in this method will not trigger a re-rendering. Avoid introducing any side-effects or subscriptions in this method.あなたはcomponentDidMount（であなたの要求を行うことができるはずです）。これにより、状態が変化したときに再レンダリングが保証されます。それでも空の場合は、レンダー内のマップが空の配列を返す可能性があります。 APIから返されたアイテムを適切にフォーマットしていることを確認してください。応答が形式のチャンスです。{ items: [] }.

Answer 5

最高）（componentDidMountで行われます。

答えがBenjaminの組み合わせで、最適な実装が得られます。