React Native не отображает поддержку, хотя данные доступны

Я только что запустил базовое приложение React Native, используя шаблон для представления с вкладками. Мне нужно иметь возможность сделать HTTP-запрос на получение некоторых данных, и я использовал пример из документации в качестве отправной точки. Рендеринг работает нормально, когда в том же компоненте. Я пытаюсь создать еще один компонент для элемента списка и передать данные в качестве реквизита от родителя.

Родитель:

  const [isLoading, setLoading] = React.useState(true);
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;
    fetch("https://reactnative.dev/movies.json", { signal: signal })
      .then((response) => response.json())
      .then((json) => setData(json.movies))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));

    return function cleanup() {
      abortController.abort();
    };
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tab Mars One</Text>
      <View
        style={styles.separator}
        lightColor="#eee"
        darkColor="rgba(255,255,255,0.1)"
      />
      {isLoading ? (
        <ActivityIndicator />
      ) : (
        <FlatList
          data={data}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
            <Post item={item} />
          )}
        />
      )}
    </View>
  );
}

Ребенок:

const Post = (item) => {
    console.log(item)
  return (
    <TouchableOpacity>
      <View>
        <Text>{item.title}</Text>
      </View>
    </TouchableOpacity>
  );
};

Когда я запускаю это, вообще ничего не отображается. Ошибок консоли нет. Консоль, регистрирующая элемент в компоненте Post, регистрирует правильные элементы из API, поэтому я знаю, что данные есть и правильно отформатированы, но ничего не отображается. Это единственные файлы, которые я редактировал в проекте, поэтому я не уверен, откуда возникла проблема или что мне не хватает. Пожалуйста, порекомендуйте.


person andrewxt    schedule 31.07.2020    source источник
comment
Вы убедились, что fetch выполнено успешно, т. е. response.ok соответствует действительности? Состояние data корректно обновляется?   -  person Drew Reese    schedule 01.08.2020
comment
Извините, надо было уточнить. В примере из документации я использовал ‹Text›{item.title}‹/Text›. Когда я использовал это, список отображается нормально. Когда я изменяю это на свой пользовательский компонент Post, передавая элемент в качестве реквизита, ничего не отображается.   -  person andrewxt    schedule 01.08.2020
comment
@DrewReese забыл отметить^   -  person andrewxt    schedule 01.08.2020


Ответы (1)


Проблема

Вы передали свои данные реквизиту item, но в Post назвали весь объект реквизита item.

Решение

Post нужно деструктурировать item из реквизита.

const Post = ({ item }) => {
  console.log(item)
  return (
    <TouchableOpacity>
      <View>
        <Text>{item.title}</Text>
      </View>
    </TouchableOpacity>
  );
};

Выставочные закуски

person Drew Reese    schedule 31.07.2020
comment
Ах хорошо. Простое решение. Это сработало. Новичок в React и не понимал, что React не может читать объект без деструктурирования. Большое спасибо! - person andrewxt; 01.08.2020
comment
@andrewxt item.item.title тоже сработал бы, но немного глупо (синоним props.item.title). Все в порядке, я тоже не уловил этого, пока не скопировал его в IDE, чтобы запустить, и не увидел, что он выглядит неправильно. - person Drew Reese; 01.08.2020
comment
нормально вижу. Итак, там, где у меня был (предмет), на самом деле была ссылка на ВСЕ реквизиты. Поэтому я выделил тот, который мне был нужен. Это имеет смысл. - person andrewxt; 01.08.2020
comment
@andrewxt Да, точно. - person Drew Reese; 01.08.2020