XML解析

Question

**在我的代码中，我得到一个错误，指出“ this.state.leader.map”不是一个函数。

我在网上搜索了我的问题，但没有一个人解决了我的问题。

这是下面的代码。希望代码清晰易懂**

import React, { Component } from 'react';
import { View, Text, FlatList } from 'react-native';
import DOMParser from 'react-native-html-parser';
import axios from 'axios';

export default class header extends Component {

    state = { leader: [] };

    componentWillMount() {
        fetch('url')
        .then(response => {
            if (response.ok) {
                return response;
            }else {
                let error = new Error('Error ');
                error.response = response;
                throw error;
            }
            },
            error => {
                let errmess = new Error(error.message);
                throw errmess;
            })
        .then(response => response.text())
        .then(leaders => {
            const str = leaders.substring(76);
            const str2 = str.substring(0, str.length - 9);

            this.setState({ leader: str2 });
        })
        .catch(error => {
            this.setState({ errMessage: error.message });
        });
        }

        renderall() {
            return this.state.leader.map(alb => <Text>{alb.Ref}</Text>  
        }

    render() {

        console.log(this.state.leader);

        return (
            <View>
              {this.renderall()}
            </View>
        );
    }
}

Answer 1

问题在于您正在将字符串设置为状态中的leader值。

如果我们查看您的代码，则表示您使用的是leaders的子字符串。为此，leaders必须是字符串。然后，您将该字符串保存为状态中的leader值。

 .then(leaders => {
    const str = leaders.substring(76);
    const str2 = str.substring(0, str.length - 9); // <- this is a string

    this.setState({ leader: str2 }); 
  })

在您的状态下，您通过以下方式设置leaders

state = {
  leaders: [] // <- this is an array
}

可以单独执行这些操作，但是在fetch请求中执行的操作与在renderAll方法中要执行的操作之间存在脱节，因为您无法使用{{1 }}放在一个字符串上。

.map

您要么需要更改获取请求中renderall() { return this.state.leader.map(alb => <Text>{alb.Ref}</Text> // .map requires this.state.leader to be an array but you // have now changed it to a string so it won't work }中存储的内容，要么将其存储为数组。或者，您需要更改leader函数中正在发生的事情。

XML解析

如果您的XML与注释中的XML相同

renderAll

然后，您可以使用简单的正则表达式捕获所需内容，然后使用<?xml version="1.0" encoding="utf-8"?> <string xmlns="url">[{"Ref":"IHR1900299","Unvan":"max"},{"Ref":"IHR1900298","Unvan":"max2"}] </string>将其转换为json。

一旦将xml作为字符串，您可以执行以下操作：

JSON.parse

Answer 2

React组件常用方法（如componentWillMount或render）由React自动绑定到this，这与您的自定义方法renderAll相反。将以下内容添加到您的课程中：

constructor(props) {
  super(props);
  this.renderAll = this.renderAll.bind(this);
}

有用的链接：

Docs on the bind keyword
Binding to this in React
相关问题：React Native: bind and 'this'?
相关问题：How to bind(this) when passing a function as a prop in react native?

Answer 3

发生这种情况是因为访存功能是异步的。因此，您只需要添加一个简单条件并传递jdbc:oracle:thin:@service_name?TNS_ADMIN=wallet：

/Oracle/ADWC/adwc_sales

Answer 4

您的renderAll方法需要返回单个JSX元素才能正确。另外，我重新格式化了使用箭头功能的方法，以避免所有这些讨厌的绑定问题。另外：您需要为每个项目提供唯一的密钥。

renderall = () => {
  return (
    <View>
     {this.state.leader.map(alb => {
       return <Text key={alb.Ref}>{alb.Ref}</Text>;
     })}
   </View> 
}

TypeError：未定义不是函数（评估“ this.state ... map”）

4 个答案:

XML解析