Здесь я хотел получить данные с сервера и показать их пользователю. Я реализую реакцию на родную. сервер возвращает кучу данных 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 транзакции, если транзакций больше.

Как я могу решить эту проблему?

1
hanan 3 Сен 2020 в 14:20

2 ответа

Лучший ответ

Ваш цикл hData неверен, вместо этого используйте этот FlatList. Так что просто замените {hData} на этот Flatlist


     <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}
      />
2
anthony willis muñoz 3 Сен 2020 в 12:29

Вы можете использовать метод среза массива с отрицательным числом, который выберет последние три элемента, как показано ниже.

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

Здесь данные будут содержать последние три элемента, которые вы можете использовать в своем плоском списке или карте.

1
Guruparan Giritharan 3 Сен 2020 в 11:29