React JS將項目推向列表的陣列

Question

我還是習慣了反應，但似乎遇到了一個問題，我無法將我的數組項目推送爲文本而不是對象。現在，我有一個API調用來檢索json，然後將它存儲到一個狀態以供以後使用。最終目標是在return語句中生成無序列表，但是，每當我嘗試將項目推送到數組時，它們都會以對象而不是字符串形式出現。我該如何解決這個問題？

國家和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是string,
• 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是object

有了這些考慮：

_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更改爲指向array而不是object。由於您在創建州時將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？

UPDATE2：

忘記提到上面，當你做

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

你正在改變typeDataTotal是一個array，而你已經開始將它定義爲一個object。確定typeDataTotal應該是什麼（例如，如果將它初始化爲state，如果它比object更有意義，則可以將其設置爲數組），併爲其指定適當的值。

因此，由於我們現在知道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> 
    ); 
} 

我會做什麼，如果我在你的位置是以下內容：

打開這些：

_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.setState({ 
    data: data, 
    imgData: data.sprites, 
    typeData: <object>, 
    specificTypeData: data.types, 
    typeDataTotal: <whatever you decide> 
}); 

我覺得REACT爲配料所有_this.setState()通話爲一體，這樣你就解僱render只有一次，無論如何，但做這種方式只是爲了確定。

和絕對重新考慮你的狀態應該如何表示;什麼應該是object和什麼應該是array。

你會最終解決這個問題。