bugfix> javascript > 投稿

ネイティブに反応する新しいIMとフェッチデータを取得しようとしていますが機能していません...ここに私がしていることはあります:

最初にデータを取得します:

   constructor() {
    super();
    this.state = {
        layoutData: {}
    };
}
componentDidMount() {
    fetch('https://www.mywebsite.org/getmyjson.php')
    .then(response => response.json())
    .then(response => {
        this.setState({
            layoutData: response
        });
    })
    .catch((error) => {
        console.log("error : " + error);
    });
}

次に、JSONデータの配列(rep変数を使用)にマッピングしようとします。

   render() {
    var test = {"libelle":"my libelle","reponse": [ {"color": "orange", "text": "14576"}, {"color": "green","text": "my text"}],"image":"rs2016-img01.png","annotation":"my annotation","source":"Source "}

    var rep = this.state.layoutData;
    console.log("//////////////////////////////////////////////");
    console.log(rep.reponse);
    console.log("//////////////////////////////////////////////");
    console.log(test.reponse);
    console.log("//////////////////////////////////////////////");
    console.log(typeof(rep.reponse));
    console.log("//////////////////////////////////////////////");
    console.log(typeof(test.reponse));
    console.log("//////////////////////////////////////////////");
    var t = rep.reponse.map(function(item) {
        return {
            key: item.color,
            label: item.text
        };
    });
    var data2 = test.reponse.map(function(item) {
        return {
            key: item.color,
            label: item.text
        };
    });

「TypeError:undefined is not a object( 'rep.reponse.map'を評価する)」というエラーが表示されます

迷惑になり始めるのは:
  1-テスト変数は、取得するJSONを表します
  2-すべてのconsole.logsはrepとtestで同じです(つまり、repはtestと同じデータとタイプを持っています)
  3-「test.reponse.map」でエラーが発生しない

私の間違いはどこですか??

コンソールログは次のとおりです。

I/ReactNativeJS(2911):////////////////////////////////////////// /// I/ReactNativeJS(2911):[{色: 'オレンジ'、テキスト: '14576'}、 I/ReactNativeJS(2911):{色: '緑'、テキスト: '-4%par rapport├á2015'}] I/ReactNativeJS(2911):////////////////////////////////////////// /// I/ReactNativeJS(2911):[{色: '#FF0000'、テキスト: '14576'}、 I/ReactNativeJS(2911):{色: '緑'、テキスト: '-4%par rapport├á2015'}] I/ReactNativeJS(2911):////////////////////////////////////////// /// I/ReactNativeJS(2911):オブジェクト I/ReactNativeJS(2911):////////////////////////////////////////// /// I/ReactNativeJS(2911):オブジェクト I/ReactNativeJS(2911):////////////////////////////////////////// ///

回答 2 件
  • 初期状態値は次のようになります。

    this.state = {
            layoutData: {
                      reponse : []
            }
        };
    
    

    APIレスポンスが適切な形式でない限り、残りは正常に見えます

  • 最初のレンダリングが発生したとき、フェッチリクエストはまだ実行されていないため、layoutDataにはまだ何もありません。 また、フェッチ要求は非同期sopであり、レンダリングする前に最初に待機する必要があります。 ロード状態を維持することは、たとえば次の場合に役立ちます。

    constructor() {
        super();
        this.state = {
            loading:true
            layoutData: {}
        };
    }
    
    componentDidMount() {
        this.setState({loading:true})
        fetch('https://www.mywebsite.org/getmyjson.php')
        .then(response => response.json())
        .then(response => {
            this.setState({
                loading:false
                layoutData: response
            });
        })
        .catch((error) => {
            console.log("error : " + error);
        });
    }
    
    

    次に、このロード状態をレンダーメソッドで次のように使用します。

    if (!this.state.loading) {
      console.log(rep.response) //will help you see that the data is received
      var t = rep.reponse.map(function(item) {
        return {
          key: item.color,
          label: item.text
        }
      })
    }
    
    

あなたの答え