Question

我目前正在从事React本机项目。

我在componentDidMount函数中使用axios获取数据，但是数据是SOAP方式。因此，我正在使用xml-js软件包将数据xml更改为json。

这是我的状态； </ p>

state = {
    contacts: [],
    isLoading: true
}

这是我的componentDidMount（）函数；

componentDidMount() {
    xmls = 'my envelope to server.';
    Axios.post('my url goes here.', xmls, {
        headers: {
            'Content-Type': 'text/xml; charset=UTF-8',
            'Authorization': 'my key',
            'SOAPAction': "my action"
        }
    }).then(response => {
        return response.data;
    }).then((res) => {
        const options = {
            compact: true,
            ignoreDeclaration: true,
            spaces: 4,
            ignoreAttributes: true,
            textFn: this.removeJsonTextAttribute,
            elementNameFn: function (val) { return val.replace('SOAP-ENV:', '').replace('ns:', ''); } //removes 'SOAP-ENV: and ns: tags from SOAP data.
        }
        // converting string xml to string json.
        let xmlToJSON = convert.xml2json(res, options);
        // converting string to json with JSON.parse()
        return contactsObj = JSON.parse(xmlToJSON);
    }).then((fin) =>{
        this.setState({contacts: fin, isLoading: false});
    }).catch(err => {
        console.warn('Error', err);
    });
}

这是我的渲染功能；

render() {
    let arr = [];
    arr.push(this.state.contacts);

    let {isLoading} = this.state;


    let res = arr.map((item, i)=> {
        return <AnnounceList headLine = {item[0].Envelope.Body.a.b.c[i]} />
     });

    return (
        <View style = {{flex: 1}}>
            <TopBar name={"Iletisim"} bColor={"#29303c"} miniLogo={require('../../../assets/pictures/Ikon07-tip2-0.png')} />
            <Spinner loading = {isLoading} color = '#29303c'>
                <ScrollView>
                {res}                      
                </ScrollView>
            </Spinner>
        </View>
    );
}

为渲染数据，我创建了一个数组实例，并将状态联系人数据推送到该实例。但是，当我尝试从数组中选择数据时，抛出未定义的错误不是对象错误。数据在信封之前有效，但是在信封之后，它会引发错误。我不明白为什么要扔？任何想法。感谢您的所有贡献。

添加的信息！

在我的状态下，联系人是一个数组。但是当我尝试渲染功能时 this.state.contacts.map()抛出了我不确定的函数，因此我用console.log(typeof this.state.contacts)检出了它的类型，它返回了对象。为什么它成为对象？难道它不能作为数组保留吗？

Answer 1

我认为问题出在这里

 let res = arr.map((item, i)=> {
    return <AnnounceList headLine = {item[0].Envelope.Body.a.b.c[i]} />
 });

您正在遍历所有物品，并且正在拿物品[0]？为什么？然后，您将i作为元素的索引。为什么不使用物品？添加类似的内容：

 let res = arr.map((item, i)=> {
    return <div>JSON.stringify(item)</div>
 });

将帮助您进行调试。您还可以使用以下方法使json更美观：

return <div><pre>{JSON.stringify(item, null, 2) }</pre></div>;

React Native无法呈现获取的数据。抛出未定义不是对象

1 个答案: