1

在这里，我想从服务器获取数据并将其显示给用户。我正在实施本机反应。服务器返回一堆 Json 数据。晚于我将返回的 json 数据存储到一个状态中。在显示数据时，如果存在更多交易，我只想向用户显示最后三笔交易。但我面临一个错误TypeError: undefined is not an object (evaluating 'n.transactions[t].amount')。下面是我试过的代码：


const MyHomeScr = () => {

const [rspnsData, setRspnsData] = useState('');


 const REQ = (m, p) => {
    fetch(url, {
      method: GET, // *GET, POST, PUT, DELETE, etc.
      headers: {
        ChannelDetails: 'Unknown',
        Accept: 'application/json ; charset=utf-8',
        'Cache-Control': 'no-cache',
        'Accept-Encoding': 'gzip, deflate',
      }
    })
      .then(response => response.json())
      .then(data => {

        'accounts' in data
          ? setRspnsData(data['accounts']) 
          : setRspnsData(data['message']);
        }
        
      })
      .catch(error => {
        console.Error('Error:', error);
      });
  };

 var hData = [];


   
    for (let i = 0; i < 3; i++) {
    hData.push(
      <FlatList
        style={styles.flatStyleData}
        data={rspnsData}
        renderItem={({item}) => (
          <View>
            <Text style={styles.flatListDataText}>
              {'\t\t\t\t\t\t\t'}Amount:{'\t\t'}
              {item.transactions[i].amount}
            </Text>
            <Text style={styles.flatListDataText}>
              {'\t\t\t\t\t\t\t'}to AccNo:{'\t\t'}
              {item.transactions[i].toAccount}
            </Text>
            <Text style={styles.flatListDataText}>
              {'\t\t\t\t\t\t\t'}Date:{'\t\t'}
              {item.transactions[i].tranDate
                .toString()
                .substring(0, 8)
                .replace(/\d{2}(?=.)/g, '$& ')
                .slice(0, -3) + ''}
            </Text>
 
          </View>
        )}
        listKey={(item, index) => 'D' + index.toString()}
        refreshing={true}
      />,
    );
  
  }

return (

<View>
{rspnsData !== '' ? (
        <View>
          <FlatList
            style={styles.flatStyle}
            data={rspnsData}
            renderItem={({item}) =>
              item.accountNumber === undefined ? (
                <View>
                  <Text style={styles.flatListText}>{rspnsData}</Text>
                </View>
              ) : (
                <View>
                  <Animatable.View animation="fadeInLeft" duration={500}>
                    <Text style={styles.flatListText}>
                      Account No: {item.accountNumber}
                    </Text>
                    <Text style={styles.flatListText}>
                      Name:{'\t\t\t\t'} {item.name}
                    </Text>
                    <Text style={styles.flatListText}>
                      Type:{'\t\t\t\t\t\t\t\t'} {item.type}
                    </Text>
                    <Text style={styles.flatListText}>
                      Balance:{'\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'}{' '}
                      {item.availableBalance}
                    </Text>
                    {/* <Text>{'\n'}</Text> */}
                    <Text
                      style={{
                        fontFamily: 'fantasy',
                        fontWeight: 'bold',
                        alignSelf: 'center',
                        marginTop: 7,
                      }}>
                      last 3 trans:
                      {'\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'}
                    </Text>
                    {hData}
                  </Animatable.View>
                </View>
              )
            }
            listKey={(item, index) => index.toString()}
            refreshing={true}
          />
        </View>
      ) : null}
    </View>

)


}

问题存在于for loop，试图迭代json数据，如果返回的json数据包含少于3个事务，将会出现未定义的错误。我试图解决如下代码： typeof (item.transactions[i].amount) !== 'undefined' ? ... :null但无济于事。我的意图是如果有更多交易，用户应该看到 3 笔交易。

我该如何解决这个问题？

4

2 回答 2

2

你的 hData 循环是错误的，而是使用这个 FlatList。所以只需替换此 Flatlist 的 {hData}


     <FlatList
        style={styles.flatStyleData}
        data={rspnsData}
        renderItem={({item}) => {
          const data = item.transactions.length > 3? item.transactions.slice(-3) : item.transactions;
          return data.map((transaction) => (<View>
            <Text style={styles.flatListDataText}>
              {'\t\t\t\t\t\t\t'}Amount:{'\t\t'}
              {transaction.amount}
            </Text>
            <Text style={styles.flatListDataText}>
              {'\t\t\t\t\t\t\t'}to AccNo:{'\t\t'}
              {transaction.toAccount}
            </Text>
            <Text style={styles.flatListDataText}>
              {'\t\t\t\t\t\t\t'}Date:{'\t\t'}
              {transaction.tranDate
                .toString()
                .substring(0, 8)
                .replace(/\d{2}(?=.)/g, '$& ')
                .slice(0, -3) + ''}
            </Text>
 
          </View>));
        }}
        listKey={(item, index) => 'D' + index.toString()}
        refreshing={true}
      />
于 2020-09-03T11:49:11.983 回答
1

您可以使用带有负数的数组的 slice 方法，它将选择最后三个项目，如下所示

const data = item.transactions.slice(-3);

这里的数据将包含您可以在平面列表或地图中使用的最后三个项目。

于 2020-09-03T11:29:02.607 回答