Может ли кто-нибудь сказать мне, является ли это допустимым объектом?

#javascript #react-native

Вопрос:

Я учусь Реагировать на родной язык для работы, и когда я компилирую и пытаюсь внести свои изменения, он говорит мне, что «Не может прочитать имя свойства «неопределенное»».

Вот мой фрагмент кода.

 const ListScreen = () => {
    
    const friends = [{name:'Friend #1'}]
    
    return(
        <View style={styles.container}>
            <Text>List Screen</Text>

            <FlatList style={styles.items}
            data={friends} 
            renderItem={({ friend }) => <Text>{friend.name}</Text>}
            />
         </View>
    )
}



export default ListScreen
 

Если вы видите в массиве «мои друзья», » имя » в основном является ключом объекта, и ошибка говорит мне, что это недопустимый объект. Я ссылался на документы RN и учебник, и они соответствуют тому, как написан мой компонент, дайте мне знать, если вы что-то опубликуете. Мои коллеги тоже были озадачены этим, хотя это выглядит довольно просто.

Комментарии:

1. ({ friend }) => должно быть (friend) =>

2. в качестве альтернативы вы могли бы написать renderItem={({name}) => <Text>{name}</Text>} . Чего вы не можете сделать, так это уничтожить friend свойство, которого нет в объекте

3. Поэтому я только что попробовал оба этих метода, и ошибка устраняется, но значения не выводятся на экран

Ответ №1:

Он визуализировался, когда я предоставил это:

  <FlatList style={styles.items}
            data={friends} 
            renderItem={({item}) => <Text>{item.name}</Text>}
            />
 

Слово «предмет» должно быть зарезервировано для этого по какой-то причине. Я бы подумал, что это будет произвольное имя ключа.

Комментарии:

1. Обновите это. Для этого мне пришлось исследовать keyExtractor. Это объяснит мой ответ.

Ответ №2:

Друзья — это массив объектов друзей, поэтому он будет выглядеть так:

 renderItem={({ item: { name } }) => <Text>{name}</Text>}
 

Комментарии:

1. К сожалению, значения не отображаются. Кто-то другой предложил то же самое.

2. По какой-то причине после того, как я изменил его на » renderItem={({элемент}) => ><Текст>{item.name}<Текст></Текст>}» это работает.

3. Это правильный ответ, у вас, вероятно, сейчас другая проблема. Например, CSS? Здесь недостаточно контекста, чтобы знать об этом.

4. Привет, Джастин, кто-то еще предложил то же самое, и это не выглядело так, как я упоминал ранее. Там не было ничего, указывающего на мой css, так как в данный момент я не использовал css. Однако я очень ценю ваш вклад.

5. Ладно, я понял. Они помещают его на подобъект под названием item . Я обновил ответ, чтобы отразить это, но главной проблемой в оригинале была деструктуризация, как { friend } я и ожидал, что объект будет самим объектом друга, но в этом случае они поместили его в { item } поле, так что, надеюсь, теперь он точен.