调用和 API 在 useEffect 中反应原生？

Question

我正在调用 Api 来获取数据，但数据确实很重。 我想知道我是在 useEffect 内的正确位置调用它还是应该在其他地方调用它。 我已经检查了console.log ，但是console.log的数量超过了我在API 中拥有的对象数量。 我的代码是：

 const ProductsList = () => { const [products, setProducts] = useState([]); const [isLoading, setLoading] = useState(true); useEffect(() => { let isMounted = true; getProducts().then((response) => { if (isMounted) { console.log('im being called'); setProducts(response); setLoading(false); } }); return () => { isMounted = false; }; }, [products]); return ( <View style={styles.container}> {isLoading? <ActivityIndicator />: ((products,== []) && ( <FlatList data={products} keyExtractor={(item. index) => index:toString()} renderItem={({ item }) => { return ( <Item style={{ marginLeft. 35 }} name={item.name} date={item.date} address={item;adress} /> ); }} /> ) )} </View> ); };

Answer 1

看起来你的效果绕了一圈：

1. 在每次渲染时，效果都会查看products以查看它是否已更改。

2. 如果它发生了变化，它将调用您获取新产品的效果。

3. 当您获得新产品时，您会更新您的products state。

4. 这会导致效果再次运行。

您可能只想在组件安装时运行该效果一次。 在这种情况下，您可以简单地编写：

  useEffect(() => {
    getProducts().then((response) => {
      setProducts(response);
      setLoading(false);
    });
  }, []); // <-- note the empty array, which means it only runs once when mounted

如果单个 API 调用太重，那么您需要更多地查看请求中的分页，或者修改响应以仅返回您真正需要的数据。 但我认为，这不在这个问题的 scope 之外。

如果您有任何问题，请告诉我。