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

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 状态。

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

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

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

如果单个 API 调用过于繁重，那么您需要更多地查看请求中的分页等内容，或者修改响应以仅返回您真正需要的数据。但我认为这超出了这个问题的范围。

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