在屏幕加载时加载数据

Question

我有以下代码，现在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}
    />
  );
};

Answer 1

您可以在 ProductListScreen 组件中使用挂钩。您可以使用 useState 钩子创建状态，并在 useEffect 的帮助下实现 componentDidMount 的行为。

请参考此链接： https://reactjs.org/docs/hooks-effect.html

Answer 2

使用componentDidMount() 显示内容。在 React 中，这是一个 "lifecycle method"。在文档中引用的示例中，您会看到添加或删除组件时可以触发功能。根据您的描述，您可能希望为您的代码测试 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 });
      });
  };