1

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

2 回答 2

2

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

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

于 2020-03-08T05:29:17.003 回答
0

用于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 });
      });
  };
于 2020-03-08T05:49:06.840 回答