axiosで取得してきたデータをsetStateできない

Question

axiosでDBからデータの取得自体はできているのに、いざそれをsetStateしようとしても、どういうわけかデータが入ってくれません

追記：ListViewのDataSourceを実行する位置が原因で、エラーが発生していたことはわかりました。
ですが今度は、肝心のListViewがなぜかレンダリングされないのです。

ListViewの要素である、ListItemには情報は渡ってきているのですが、どういうわけかまっさらなままレンダーされないのです

// Screen.js
import React from 'react';
import {
  Text,
  View
} from 'react-native';
import { List } from '../common';

class Screen extends React.Component {
  render() {
    return (
      <View>
        <List />
      </View>
    );
  }
}

export default Screen;

// List.js
import React from 'react';
import { ListView } from 'react-native';
import axios from 'axios';
import ListItem from './ListItem';

class List extends React.Component {
  constructor() {
    super();
    this.state = { datas: [] };

    // こっちにdataSourceを置く
    this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1!==r2});
  }

  componentWillMount() {
    // 以前はstateに直接ds.cloneWithRowsしたデータを入れていたが、それでは失敗することがわかったので移動

　　// const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    //axios.get('http://path/to/api/v1/users')
    //  .then((res)=>{
    //    this.setState({ datas: ds.cloneWithRows(res.data) });
    //    // 帰ってきたユーザーデータが表示される
    //    console.log(JSON.stringify(res.data));
    //    // stateが変わってない
    //    console.log(this.state);
    //  })
    //  .catch((e)=>console.log(`axios get error: ${e.message}`));

　　// 修正したコード
    axios.get('http://lala.work/api/v1/users')
      .then((res)=>this.setState({ datas: res.data }))
      .catch((e)=>console.log(`axios get error: ${e.message}`));
  }

  renderRow(user) {
　　return <ListItem user={user}/>;
  }

  render() {
    return (
      <ListView
 　　　 enableEmptySections
        dataSource={this.dataSource.cloneWithRows(this.state.datas)}
        renderRow={this.renderRow}
      />
    );
  }
}

export default List;

// ListItem.js

import React from 'react';
import {
  Text
} from 'react-native';

class ListItem extends React.Component {
  render() {
    // データは入っている
    console.log(this.props.user.name);

    return (
      <Text>{this.props.user.name}</Text>
    );
  }
}

export default ListItem;

どなたかListViewが出ない理由をご存知の方お願いできないでしょうか？
よろしくお願いいたします

Answer 1

まず、ds.cloneWithRows(res.data)の値がちゃんと取れているかも確認し、仮に値が確認出来るのであれば、componentWillUpdate(nextProps, nextState)で、nextState.dataSourceの値を確認してみてはいかがでしょう？おそらく、nextState.dataSourceではAPIからのレスポンスデータをもとにセットした値が確認出来ると思いますので、あとは、render内でthis.state.dataSourceのlengthチェックをするなりして、出力する値を分岐させてあげれば良いのではないでしょうか？（って、lengthを参照するとエラーが出るのでしたっけ。)

とりあえず、componentWillMountが実行された後に走るrenderメソッド内では、まだ、PromiseがResolvedされていないため、this.state.dataSourceの値はAPIからのレスポンスデータにはなっていません。（非同期処理なのでタイムラグが生まれます）

Comments

[dialbird]

HayatoKamonoさん

ややこしい質問にも関わらず、ご返答ありがとうございます！
これを書いている最中に、ふとシミュレーターの、リストが出ていてほしい箇所をスワイプしてみたら、リストが出てきました！
どうやらスワイプがなんかのきっかけになっているようですが、やはり依然として初期状態は何も表示されません。

これはおっしゃられているcomponentWillUpdateとかを駆使しなければならないのでしょうか？

[HayatoKamono]

this.state.datasってなんですか？タイプミスでしょうか？

[dialbird]

失礼しました！

新しくthis.dataSourceを作成したので、stateの中身をそれと被らないdatasに変えたのでした

[dialbird]

探し求めていた結果、こちらのページで最後の解決策を見つけました！
https://github.com/react-community/react-navigation/issues/1238

出ないのはScrollViewのバグ？らしいので、removeClippedSubviewsをfalseにすることでとりあえず解決しました！

HayatoKamonoさん
ご協力をありがとうございました！