Загрузка данных при загрузке экрана - PullRequest
Новая
       11

Загрузка данных при загрузке экрана

1 голос
/ 08 марта 2020

У меня следующий код, сейчас renderProductItem отображается с фиксированным products. Я хочу, чтобы список отображался при загрузке экрана. Поэтому при загрузке экрана он должен вызывать API и отображать список на основе ответа API.

Я видел решения, использующие state наподобие https://github.com/vikrantnegi/react-native-searchable-flatlist/blob/master/src/SearchableList.js, но проблема в том, что когда я создаю constructer, он не вызывается при загрузке экрана. Поэтому я не уверен, как использовать state в моем случае.

Я не могу понять, как вызывать API при загрузке экрана и отображать список после получения ответа. 

export const ProductListScreen = ({ navigation, route }): React.ReactElement => {   

  const displayProducts: Product[] = products.filter(product => product.category === route.name);    

  const renderProductItem = (info: ListRenderItemInfo<Product>): React.ReactElement => (
    <Card
      style={styles.productItem}
      header={() => renderItemHeader(info)}
      footer={() => renderItemFooter(info)}
      onPress={() => onItemPress(info.index)}>
      <Text category='s1'>
        {info.item.title}
      </Text>
      <Text
        appearance='hint'
        category='c1'>
          {info.item.category}
      </Text>
          <RateBar
            style={styles.rateBar}
            value={4}
          // onValueChange={setRating}
          />
      <CategoryList
        style={styles.categoryList}
        data={["Adventure", "Sport", "Science", "XXX"]}
      />
      <Text>
        The element above represents a flex container (the blue area) with three flex items.
      </Text>
    </Card>
  );

  return (
    <List
      contentContainerStyle={styles.productList}
      data={displayProducts.length && displayProducts || products}
      renderItem={renderProductItem}
    />
  );
};

Ответы [ 2 ]

2 голосов
/ 08 марта 2020

Вы можете использовать хуки в вашем компоненте ProductListScreen. Вы можете создать состояние с помощью ловушки useState и с помощью useEffect вы достигнете поведения componentDidMount.

Пожалуйста, перейдите по этой ссылке: https://reactjs.org/docs/hooks-effect.html

0 голосов
/ 08 марта 2020

Используйте componentDidMount() для отображения содержимого. В React это «метод жизненного цикла» . В примерах, приведенных в документации, вы видите, что функции могут запускаться при добавлении или удалении компонента. Исходя из вашего описания, вы захотите проверить componentDidMount для своего кода.

В приведенном вами примере кода вы можете видеть, что этот разработчик использует его в своем классе для вызова функции makeRemoteRequest 

    componentDidMount() {
    this.makeRemoteRequest();
  }

  makeRemoteRequest = () => {
    const url = `https://randomuser.me/api/?&results=20`;
    this.setState({ loading: true });

    fetch(url)
      .then(res => res.json())
      .then(res => {
        this.setState({
          data: res.results,
          error: res.error || null,
          loading: false,
        });
        this.arrayholder = res.results;
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  };
...