Arrays 将项目推送到列表的数组中

我仍然习惯于做出反应，但似乎遇到了一个问题，即我无法将数组项作为文本而不是对象推送。现在，我有一个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>
        );

    }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
数据：{}，//由从API获取数据填充
imgData:{}，//由从API获取图像数据填充
typeData:{}，//由从API获取类型数据填充
类型：{
typesArray:[]
},
typeDataTotal:{}，
specificTypeData:{}
};
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
//警报（'文本字段值为：'+this.state.value）；
var_this=这个；
取（'https://pokeapi.co/api/v2/pokemon/'+this.state.value+'/'）。然后（函数（响应）{
如果（response.status！==200）{
console.log（'看起来有问题。状态代码：'+response.Status）；
返回；
}
//检查回复中的文本
response.json（）.then（函数（数据）{
控制台日志（数据）；
console.log（data.sprites.front\u默认值）；
_this.setState（{data:data}）；
_this.setState（{imgData:data.sprites}）；
_this.setState（{typeData:data.types[0].type}）；
_this.setState（{specificTypeData:data.types}）；//这是我要用于数组中键的
_这是我的国家({
typeDataTotal:Object.keys（data.types）
});
console.log（data.types[0].type.name）；//将项显示为字符串
console.log（data.types[1].type.name）；
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形式=[]；
for（类型DataTotal中的var键）{
console.log（“obj.+key+”=“+specifictypeddata[key].type.name”）；
forms.push（）；
控制台日志（表格）；
}
返回(
{forms}
);
}
}

输出示例：

---

typeDataTotal

是一个对象，您试图使用

for

循环对其进行迭代，并检查其

length

属性。简单对象，例如您分配给

typeDataTotal

的对象，没有

length

属性，因此您的

i

的条件是immed最近为假，因此循环到此结束

为了在简单对象上迭代，请使用循环

更新1：

让我们检查您的状态对象及其属性：

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: {}
    };

我们在这里看到：

• 此.state.value

  是一个

  字符串

• 此.state.data

  是一个

  对象

• this.state.imgData

  是一个

  对象

• 此.state.typeData

  是一个

  对象

• 此.state.types

  是一个

  对象

• this.state.types.typesArray是一个
  数组

• this.state.typeDataTotal

  是一个

  对象

• 此.state.specificTypeData是一个
  对象

考虑到这些：

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

这可能是错误的。从上面的操作中，当您执行

\u This.setState（{typeData:data.types[0].type}）时

你让我明白了

数据。类型

是一个

数组

特定类型数据

应该是一个

对象

，所以这里你只是把

特定类型数据

改为指向一个

数组

而不是

对象

。因为你把

特定类型数据

设置为

对象

了创建状态后，它始终应保持为

对象

如果
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);

同样，什么是
数据.types
？它是
对象
还是
数组

更新2：

当你这么做的时候，忘了提到上面的内容

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

您正在将
typeDataTotal
更改为
array
，而您最初将其定义为
对象。确定
typeDataTotal
应该是什么（例如，当您初始化
状态时，如果它比
对象更合理，您可以将其设置为数组）并给它一个合适的值

既然我们现在知道
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() {
    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)
});

进入

\u this.setState({
数据：数据，
imgData:data.sprites，
类型数据：，
specificTypeData:data.types，
typeDataTotal：
});

我认为react正在将所有
\u this.setState（）
调用批处理到
_this.setState({
    data: data,
    imgData: data.sprites,
    typeData: <object>,
    specificTypeData: data.types,
    typeDataTotal: <whatever you decide>
});