リストにJSを押して項目を配列に返す

Question

私はまだ反応に慣れていますが、配列項目をオブジェクトではなくテキストとしてプッシュできない問題に遭遇したようです。今、私はjsonを取得し、その後の使用のために状態に格納するAPI呼び出しを持っています。最終目標はreturn文で順序付けられていないリストを生成することですが、配列にアイテムをプッシュしようとするたびに、文字列ではなくObjectとして出力されます。これをどうやって解決するのですか？

州およびAPIコール

class App extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      value: '', 
      data: {}, //filled by fetch data from API 
      imgData: {}, //filled by fetch image data from API 
      typeData: {}, //filled by fetch types data from API 
      types: { 
       typesArray: [] 
      }, 
      typeDataTotal: {}, 
      specificTypeData: {} 
     }; 
    } 

    handleChange(event) { 
     this.setState({value: event.target.value}); 
    } 

    handleSubmit(event) { 
     //alert('Text field value is: ' + this.state.value); 
     var _this = this; 
     fetch('https://pokeapi.co/api/v2/pokemon/' + this.state.value + '/').then(function(response) { 
      if (response.status !== 200) { 
       console.log('Looks like there was a problem. Status Code: ' + response.status); 
       return; 
      } 
      // Examine the text in the response 
      response.json().then(function(data) { 
       console.log(data); 
       console.log(data.sprites.front_default); 
       _this.setState({data: data}); 
       _this.setState({imgData: data.sprites}); 
       _this.setState({typeData: data.types[0].type}); 
       _this.setState({specificTypeData: data.types}); //this is the one I want to use for keys in the array 
       _this.setState({ 
        typeDataTotal: Object.keys(data.types) 
       }); 
       console.log(data.types[0].type.name); //shows item as string 
       console.log(data.types[1].type.name); 
       console.log(Object.keys(data.types).length); 

      }); 
     } 
    } 

    render() { 
     var data = this.state.data; 
     var imgData = this.state.imgData; 
     var typeData = this.state.typeData; 
     var typeDataTotal = this.state.typeDataTotal; 
     var specificTypeData = this.state.specificTypeData; 
     var forms = []; 

     for (var key in typeDataTotal) { 
      console.log("obj." + key + " = " + specificTypeData[key].type.name); 
      forms.push(<formjs data={specificTypeData[key].type.name}/>); 
      console.log(forms); 
     } 
     return (
      <div>{forms}</div> 
     ); 

    } 
} 

出力の例：

Answer 1

typeDataTotalがオブジェクトであり、あなたがforループを使用して、それを反復処理しようとしていると、それはlengthプロパティのチェックをされています。 typeDataTotalに割り当てたものなどの単純なオブジェクトにはlengthというプロパティがないため、i < typeDataTotal.lengthの条件はただちにfalseになり、そこでループが終了します。

単純なオブジェクトを反復するためには、for <key> in <object>ループ

UPDATE1を使用します。

のは、あなたの状態オブジェクトとそのプロパティを調べてみましょう：

this.state = { 
     value: '', 
     data: {}, //filled by fetch data from API 
     imgData: {}, //filled by fetch image data from API 
     typeData: {}, //filled by fetch types data from API 
     types: { 
      typesArray: [] 
     }, 
     typeDataTotal: {}, 
     specificTypeData: {} 
    }; 

我々はここを参照してください：

• this.state.valueは、,
• this.state.dataはobject
• this.state.imgDataあるobject
• this.state.typeDataあるobject
• this.state.typesあるobject
this.state.types.typesArray
• あるarray
• this.state.typeDataTotalあるobject
• this.state.specificTypeDataである01であります念頭に置いてこれらにより

：

_this.setState({specificTypeData: data.types}); //this is the one I want to use for keys in the array 

これは間違っている可能性があります。その上の操作から、_this.setState({typeData: data.types[0].type});を実行すると、data.typesがarrayであることが分かります。 specificTypeDataはobjectである必要があります。ここでspecificTypeDataをobjectの代わりにarrayに変更しました。状態を作成したときにspecificTypeDataをobjectと設定したため、その状態は全体にわたってobjectのままになります。

data.typesがない配列である場合は、data.types[0]を行うことによって、間違ったその値にアクセスしています。これは、要素ではなく配列であれば、その要素にアクセスする方法です。ここで

_this.setState({ 
    typeDataTotal: Object.keys(data.types) 
}); 

そんなに最も可能性の高い、data.typesは実際にはオブジェクトであることを理解することが私を与える、あなたはそれが前の行で間違ったプロパティですアクセスしています。

console.log(data.types[0].type.name); //shows item as string 
console.log(data.types[1].type.name); 

また、data.typesとは何ですか？それはobjectですか、それともarrayですか？

アップデート2：

は、その上に言及するのを忘れてしまったあなたは

_this.setState({ 
    typeDataTotal: Object.keys(data.types) 
}); 

を行うときは、最初にobjectとしてそれを定義している間は、arrayするtypeDataTotalを変更しています。 typeDataTotalの内容を決定してください（たとえば、よりも意味がある場合は、stateを初期化するときに配列に設定してください）、適切な値を指定してください。

data.typesがオブジェクトであることがわかっているので、response.json().then()コールバック内でコードを実行した後の状態は次のようになります。

あなたは実行します。

_this.setState({data: data}); 
_this.setState({imgData: data.sprites}); 
_this.setState({typeData: data.types[0].type}); 
_this.setState({specificTypeData: data.types}); //this is the one I want to use for keys in the array 
_this.setState({ 
    typeDataTotal: Object.keys(data.types) 
}); 

ので、あなたがこのような状態で終わる：

this.state = { 
    value: <string>, //this was unmodified 
    data: data, //it's an <object>, should be an <object> 
    imgData: data.sprites, //I don't know what data.sprites is but should be an <object> 
    typeData: data.types[0].type, //It's <undefined>, should be an <object> 
    types: { 
     typesArray: <array> //this was unmodified 
    }, 
    typeDataTotal: Object.keys(data.types), //It's an <array>, should be an <object> 
    specificTypeData: data.types //it's an <object>, should be an <object> 
}; 

だから、我々は最終的にあなたのrender方法に達し、それでは、このような状態であり、何が起こるか見てみましょう：

render() { 
    var data = this.state.data; //it's an <object>, should be an <object> 
    var imgData = this.state.imgData; //I don't know what data.sprites is but should be an <object> 
    var typeData = this.state.typeData; //It's <undefined>, should be an <object> 
    var typeDataTotal = this.state.typeDataTotal; //It's an <array>, should be an <object> 
    var specificTypeData = this.state.specificTypeData; //it's an <object>, should be an <object> 
    var forms = []; 

    for (var key in typeDataTotal) { // you are now iterating over an array, so key is an integer number (0, 1, 2, etc) 
     console.log("obj." + key + " = " + specificTypeData[key].type.name); //specificTypeData is an object, and you are trying to access its values by doing specificTypeData[<number>] which will return undefined. 
     forms.push(<formjs data={specificTypeData[key].type.name}/>); //data={undefined} 
     console.log(forms); 
    } 
    return (
     <div>{forms}</div> 
    ); 
} 

私があなたの居場所にいた場合の対応は次のとおりです。私はあなただけとにかく一度だけrenderを発射、それをこのように行いますように、一つにすべてのあなたの_this.setState()の呼び出しをバッチ処理されて反応すると思う

_this.setState({ 
    data: data, 
    imgData: data.sprites, 
    typeData: <object>, 
    specificTypeData: data.types, 
    typeDataTotal: <whatever you decide> 
}); 

に

_this.setState({data: data}); 
_this.setState({imgData: data.sprites}); 
_this.setState({typeData: data.types[0].type}); 
_this.setState({specificTypeData: data.types}); //this is the one I want to use for keys in the array 
_this.setState({ 
    typeDataTotal: Object.keys(data.types) 
}); 

： は、これらを回し

念のため。

と間違いなくはあなたの国家の表現方法を再考します。 objectは何で、何がarrayであるべきですか。

これは結局解決します。