Reactjs 在屏幕加载上加载数据

我有以下代码，现在

renderProductItem

是用固定的

产品

呈现的。我希望列表在屏幕加载时呈现。所以，当屏幕加载时，它应该调用一个API并根据API响应呈现列表

我看到了使用

state

sopmething的解决方案，但问题是当我创建

constructor

时，它不会在屏幕加载时被调用。因此，我不知道如何在我的案例中使用

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}
    />
  );
};

export const ProductListScreen=（{navigation，route}）：React.ReactElement=>{
const displayProducts:Product[]=products.filter（Product=>Product.category===route.name）；
const renderProductItem=（信息：ListRenderItemInfo）：React.ReactElement=>(
renderItemHeader（信息）}
页脚={（）=>renderItemFooter（信息）}
onPress={（）=>onItemPress（信息索引）}>
{info.item.title}
{info.item.category}
上面的元素表示一个包含三个flex项的flex容器（蓝色区域）。
);
返回(
);
};

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

请参阅此链接：

---

使用

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 });
      });
  };

---

如果我使用'componentDidMount（）{}`我将无法找到名称'componentDidMount'。ts（2304）生命周期函数，如

componentDidMount

仅在类组件中工作。OP提供的代码示例显然是一个功能组件，而不是类组件。