Создание горизонтальной прокрутки с динамическими данными из API

Question

У меня есть горизонтальное представление прокрутки с несколькими представлениями внутри, данные внутри представлений извлекаются из вызова API, поэтому я не знаю, сколько представлений у меня будет в представлении прокрутки, есть ли лучший способ реализовать это? и как я могу преобразовать это в плоский список, если это возможно?

state = { data: [] };

async componentDidMount(){
      axios.get('http://reduxblog.herokuapp.com/api/posts')
       .then((response) =>  { this.setState({ data: response.data})});
    }

<ScrollView horizontal={true} style={{width: '100%'}}>
  <View>
    <Text>
      {this.state.data.title}
    </Text>
  </View>
</ScrollView>

Answer 1

Вы правы, FlatList был бы лучшим решением для динамических данных.

Вот краткий пример, основанный на данных, которые вы используете.

class MyFlatList extends React.Component {

  constructor(props) {
    super(props);
    this.state = { data:[] };
  }

  async componentDidMount(){
    axios.get('http://reduxblog.herokuapp.com/api/posts')
     .then((response) =>  { this.setState({ data: response.data})});
  }

  _keyExtractor (item, index) {
    return index.toString();
  }

   _renderItem ({ item, index }) {
    return (<Text>{item.title} - {item.categories}</Text>);
  }

  render() {
    return(
     <FlatList style={{ flex: 1 }}
        data={this.state.data}
        keyExtractor={this._keyExtractor.bind(this)}
        renderItem={this._renderItem.bind(this)}
        horizontal={true}
      />
    );
  }
}

Как видите, FlatList требует, чтобы ему было передано несколько реквизитов. Три из них всегда обязательны: keyExtractor, renderItem и data

Сначала keyExtractor

Используется для извлечения уникального ключа для данного элемента по указанному индексу. Ключ используется для кэширования и в качестве ключа реакции для отслеживания переупорядочения элементов

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

Извлекает элемент из данных и отображает его в списке.

Данные должны быть переданы в FlatList через реквизит данных. Вы храните свои данные в состоянии компонентов, чтобы мы могли передать их как this.state.data, FlatList будет использовать это для построения списка.

Наконец, нам нужно передать true в горизонтальную подпорку, чтобы FlatList создавал горизонтальный список, а не вертикальный список.

Дополнительную информацию можно найти в документах для FlatList. Я предлагаю вам взглянуть туда и посмотреть, что вы можете придумать.

Наконец, убедитесь, что вы импортировали FlatList, View и Text из реактивной системы, в противном случае у вас будет несколько ошибок, с которыми нужно разобраться. Я бы также посмотрел на ваш запрос axios, так как вы, похоже, не улавливаете ошибок, которые могут возникнуть из-за функции.