Я только что запустил базовое приложение 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, поэтому я знаю, что данные есть и правильно отформатированы, но ничего не отображается. Это единственные файлы, которые я редактировал в проекте, поэтому я не уверен, откуда возникла проблема или что мне не хватает. Пожалуйста, порекомендуйте.
fetch
выполнено успешно, т. е.response.ok
соответствует действительности? Состояниеdata
корректно обновляется? - person Drew Reese   schedule 01.08.2020