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。

你会最终解决这个问题。