В приведенном ниже коде показаны 2 функции, которые ДОЛЖНЫ отображать компоненты на экране. Когда я отображаю массив, компоненты отображаются. Проблема в том, что когда я пытаюсь отобразить массив внутри объекта в массиве, компоненты не будут отображаться.
Итак, представим, что у нас есть этот набор данных:
const categories = [
{
title: "Burgers",
items: [
{
item_number: 0,
name: "Cheese Burgers"
},
{
item_number: 1,
name: "Double Cheese Burgers"
},
{
item_number: 2,
name: "Triple Cheese Burgers"
}
]
}
];
А затем у нас есть эта функция рендеринга:
render() {
const { backgroundImage, menuIndex } = this.props.screenProps;
return (
<View>
{/*THIS DOES RENDER*/}
{categories ? (
categories.map((category, i) => (
<Card key = {i} image = {backgroundImage}>
<Text style = {{ marginBottom: 10 }}>{category.title}</Text>
</Card>
))
) : (
<ActivityIndicator style = {styles.center_screen} />
)}
{/*THIS DOES NOT RENDER*/}
{categories ? (
categories[menuIndex].items.map((item, i) => {
<View key = {i}>
{console.warn(item.name)}
<Text>{item.name}</Text>
</View>;
})
) : (
<ActivityIndicator style = {styles.center_screen} />
)}
</View>
);
}
}
Переменная «категории» вызывается из API, и пока она находится в пути, отображается индикатор активности. Если он не равен нулю, я могу отображать массив и отображать текст из каждого объекта. Однако, когда я пытаюсь отобразить массив внутри объекта массива, я не могу отобразить текст на экране. Когда я выводю предупреждение на экран, я могу видеть «item.name», но не в текстовом компоненте.
Как и почему это происходит?
Да, я вижу это в компоненте YellowBox, но не в компоненте Text.
Вы пытались удалить желтый ящик? Просто догадка. Возможно, остановил рендеринг.
Когда у вас есть стрелочная функция и запускается блочный оператор {}, неявный возврат не существует, он ожидает явного оператора return, вы можете либо заменить фигурные скобки круглыми скобками, чтобы заставить работать неявный возврат, либо явно использовать оператор return .. .
Очень хороший! Я только что поменял его сейчас.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


На карте отсутствует инструкция возврата
изменять
categories[menuIndex].items.map((item, i) => {
<View key = {i}>
к
categories[menuIndex].items.map((item, i) => {
return <View key = {i}>
Когда у вас есть настраиваемое выражение (многострочные выражения), вам нужно написать некоторую настраиваемую логику внутри итератора, и, следовательно, вы хотите обернуть его фигурными скобками {}, таким образом, обратный вызов карты ожидает, что вы вернете результат.
{/*THIS DOES NOT RENDER*/}
{categories ? (
categories[menuIndex].items.map((item, i) => {
return (
<View key = {i}>
{console.warn(item.name)}
<Text>{item.name}</Text>
</View>
);
})
)
Вы пробовали вернуть return свое мнение?
Вы проверяли, возвращает ли объект category [menuIndex]?