Отображение двух массивов на одной странице путем объединения их в один массив - реагирует на нативный - PullRequest
Новая
       3

Отображение двух массивов на одной странице путем объединения их в один массив - реагирует на нативный

0 голосов
/ 11 апреля 2020

Я импортирую два массива из других файлов и пытаюсь объединить эти массивы (отправитель, путешественник) в один массив, используя оператор распространения, и отображаю его с помощью метода map. Всякий раз, когда я пытаюсь отобразить одну из данных из обоих объединенных массивов, их значения отображаются далеко друг от друга, даже если они записаны в коде рядом друг с другом.

Это класс моего отправителя. У меня так же, как у Traveler 

class Sender {
  constructor(
    snd_f_name,
    snd_l_name,
    snd_id,
    snd_cnic,
    orderTitle,
    pack_weight,
    pack_type,
    snd_dest,
    snd_arr_date
  ) {
    this.snd_f_name = snd_f_name;
    this.snd_l_name = snd_l_name;
    this.snd_id = snd_id;
    this.snd_cnic = snd_cnic;
    this.orderTitle = orderTitle;
    this.pack_weight = pack_weight;
    this.pack_type = pack_type;
    this.snd_dest = snd_dest;
    this.snd_arr_date = snd_arr_date;
  }
}

export default Sender;

. Я импортирую этот класс и класс Traveler на одну страницу, а затем определяю их данные. Это мой код Я объединяю SENDER и TRAVELER в один массив, то есть abc2, и отображаю значение каждого из этих объединенных массивов, используя метод карты 

    import SENDER from "../data/sender";
    import TRAVELER from "../data/traveler";
    import Sender from "../model/sender";
    import Traveler from "../model/traveler";

    const test = prop => {
      const SENDER = [
        new Sender(
          "Shahnihal",
          "Alwani",
          "u1",
          "123456789",
          "Mobile Phone",
          "500 g",
          "Electronic",
          "New York",
          "20-04-2020"
        )
      ];

      const TRAVELER = [
        new Traveler("Shahzain", "Alwani", "u1", "1234567777", "1 Kg", "Rs. 1000")
      ];

      const abc2 = [...SENDER, ...TRAVELER];
      return (
        <View style={styles.screen}>
          {abc2.map((item, key) => (
            <View>
              <Text key={item.snd_id}> {item.snd_f_name} </Text>
              <Text key={item.tr_id}> {item.tr_f_name} </Text>
            </View>
          ))}
        </View>
      );
    };
Это мой вывод. Я не знаю, почему существует разница между значениями

Я делаю это, потому что я хочу отобразить данные обоих массивов на одной странице, используя flatList, но вывод был таким же, так что Я попытался сделать это более простым способом с целью тестирования

Ответы [ 3 ]

0 голосов
/ 11 апреля 2020

После const abc2 = [...SENDER, ...TRAVELER]; добавьте эту строку, которая преобразует массив в объект. 

object = Object.assign({}, ...abc2 );

Теперь вы можете напрямую использовать этот объект в ответ 

return (
        <View style={styles.screen}>
        <Text>{object.tr_f_name}</Text>
        <Text>{object.snd_f_name}</Text>
        </View>
      );

enter image description here

Надеюсь, это поможет!

0 голосов
/ 11 апреля 2020

Ваша проблема с этим кодом ниже: 

{abc2.map((item, key) => (
        <View>
          <Text key={item.snd_id}> {item.snd_f_name} </Text>
          <Text key={item.tr_id}> {item.tr_f_name} </Text>
        </View>
      ))}

В вашем массиве для объекта отправителя у вас нет ключа tr_f_name , если вы видите в своем классе Sender. Таким образом, он рендерит пустую высоту текстового компонента.

То же самое относится к классу Traveler, у вас нет ключа snd_f_name .

0 голосов
/ 11 апреля 2020

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

<View>
  <Text><Text>This writing should fill most of the container </Text><Text>This writing should fill most of the container</Text></Text>       
</View>

или вы можете использовать Styling with flexbox: 

<View style={{flexDirection:'row', flexWrap:'wrap'}}>
  <Text>one</Text><Text>two</Text><Text>Three</Text><Text>Four</Text><Text>Five</Text>
</View>
...