Карта функций в JSX реагировать на родной

Question

в моей программе напишите в реагировать на родной язык, у меня есть этот фрагмент:

getCompanyFunction() {
  const { enterprises, navigation } = this.props;
  return (
    <ScrollView horizontal>
      <View style={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap' }}>
        { enterprises.map((enterprise) => {
          return (
            <Card key={enterprise.id} containerStyle={{ width: Dimensions.get('window').width - 50 }}>
              <ListItem
                title={enterprise.name}
                subtitle={(
                  <View>
                    <Text style={{ color: theme.text.default }}>
                      {enterprise.fonction}
                    </Text>
                    <Text style={{ color: theme.palette.text.default }}>
                      {enterprise.location || ''}
                    </Text>
                  </View>
                )}
                onPress={enterprise.id && (() => handleItemPress(enterprise.id, navigation))}
              />
            </Card>
          );
        })}
      </View>
    </ScrollView>
  );
}

для моего примера у меня три предприятия, но в результате видно только первое.Однако функция map должна повторять мой массив?

спасибо!

Answer 1

Функция map возвращает новый массив с результатами своей работы.

MDN docs:

Метод map () создаетновый массив с результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.

Вы можете использовать компонент FlatList для рендеринга результирующего массива из вашего map function.

Вот пример того, как вы можете это сделать (при условии, что вам не нужно изменять enterprises данные):

renderCard = (enterprise) => {
    return (
        <Card key={enterprise.id} containerStyle={{ width: Dimensions.get('window').width - 50 }}>
            <ListItem
                title={enterprise.name}
                subtitle={(
                    <View>
                        <Text style={{ color: theme.text.default }}>
                            {enterprise.fonction}
                        </Text>
                        <Text style={{ color: theme.palette.text.default }}>
                            {enterprise.location || ''}
                        </Text>
                    </View>
                )}
                onPress={enterprise.id && (() => handleItemPress(enterprise.id, navigation))}
            />
        </Card>
    );
}

getCompanyFunction() 
  const { enterprises, navigation } = this.props;
  return (
    <ScrollView horizontal>
      <View style={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap' }}>
        <FlatList
        data={enterprises}
        renderItem={({ item }) => renderCard(item)} />
      </View>
    </ScrollView>
  );
}

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