【解決方法】fetch と xml2js を使用して XML を listitem.accordion として表示する

プログラミングQA

[ad_1]

私はSQLデータベースからこのxmlデータを取得しようとしています fetch そして、それを使用して解析します xml2js と呼ばれるリストにパッケージ化する meterData その後、反応するネイティブ要素にxmlデータを挿入したい ListItem.Accordion これまでのところ、これは私のコードです。アコーディオンは表示されますが、タイトルとテキストが空白で、コンソールにこのメッセージがスローされたコンテンツが表示されます

見積もり:

処理されていない約束の拒否: TypeError: undefined はオブジェクトではありません (「結果を評価しています」[‘counter’][‘serviceNumber’]’)

私が試したこと:

function getReadingOrder(Emp_Number,{navigation}){
  let meterDataList = React.useState({});
  fetch('http://server.com/gecol/partner/api.php?emp_number='+`${Emp_Number}`, {
  method: 'POST',
  headers: {
    Accept: 'text/plain',
    'Content-Type': 'text/plain'
  }
})
  .then((response) => response.text())
  .then((data) => { var xml2js = require('xml2js');

            var parser = new xml2js.Parser();
            parser.parseString(data, function(err,result){
            //Extract the value from the data element
            const meterData = {
              servicePoint:result['counter']['serviceNumber'],
              counternumber:result['counter']['counternumber'],
              consumer:result['counter']['consumername'],
              consumpationtype:result['counter']['consumpationtype'],
              currentread:result['counter']['currentread'],
              currentdate:result['counter']['currentdate'],
              lastread:result['counter']['lastread'],
              lastdate:result['counter']['lastdate'],
              consumpation:result['counter']['consumpation'],
              phonenumber:result['counter']['phonenumber'],
            }
            meterDataList.push(meterData);
            // getRounds(meterData);
      })
    })
    const [expanded, setExpanded] = React.useState(true);
    return (  
      
      <SafeAreaProvider >
        <View style={ReaderHome.Accordion}>
          {meterDataList.map((meter, i) => (
          <ListItem.Accordion 
            content={
              <>
              <Avatar size={64} icon={{ name: 'home', type: 'AntDesign' }} containerStyle={{ backgroundColor: '#1f95c0' }}/>
              <ListItem.Content>
                <ListItem.Title style={{left:10}}><Text style={ReaderHome.ConsumerName}>{meter.consumer}</Text></ListItem.Title>
                <ListItem.Subtitle style={{left:10}}><Text style={ReaderHome.ServiceNumber}>{meter.servicePoint}</Text></ListItem.Subtitle>
                </ListItem.Content>
              </>
            }
            isExpanded={expanded}
            onPress={() => {
              setExpanded(!expanded);
            }}
              >
              <ListItem key={i} onPress={alert(meter.lastdate)} bottomDivider>
                <Avatar title={''} source={''} />
                  <ListItem.Content>
                    <ListItem.Title>{meter.currentread}</ListItem.Title>
                    <ListItem.Subtitle>{meter.lastread}</ListItem.Subtitle>
                  </ListItem.Content>
                  <ListItem.Chevron />
              </ListItem>
          </ListItem.Accordion>))}
        </View>
      </SafeAreaProvider>);
      
  }

解決策 1

あなたの例外の2つのこと:

見積もり:

未処理の約束の拒否

これは、コードを try...catch 例外をキャプチャして詳細を確認するのに役立つブロック。 JavaScript では暗黙的な例外処理が推奨されないため、例外を処理する場合は常に例外ハンドラーを使用することをお勧めします。

見積もり:

TypeError: undefined はオブジェクトではありません (‘result を評価しています[‘counter’][‘serviceNumber’]’)

これについては、問題は counter 口論。 これが起こっている理由の 1 つは、 result オブジェクトに含まれていない counter—したがって、 serviceNumber フィールドだから無理 counterundefined.

ヒント: データ構造を保証しない API (たとえば、多くの場合、null 値を提供したり、利用できないデータの提供を無視したりする) を使用する場合は、常に使用する必要があります。 if...else オブジェクトがないことを確認する null また undefined.

[ad_2]

コメント

タイトルとURLをコピーしました