React JS将项目推送到数组以获取列表

Question

我仍然习惯于做出反应，但似乎遇到了一个问题，我无法将数组项目作为文本而不是对象推送。现在，我有一个API调用来检索json，然后将其存储到一个状态供以后使用。最终目标是在return语句中生成一个无序列表，但是，每当我尝试将项目推送到我的数组时，它们就会以对象而不是字符串形式出现。我该如何解决这个问题？

状态和API调用

SelectionKey

输出示例：

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>
});

进入

_this.setState()

我认为反应是将所有render次调用合并为一个，这样您无论如何都只会触发object，但这样做只是为了确定。

和绝对重新思考如何表达你的国家;什么应该是array，什么应该是spring。

你最终会解决这个问题。