javascript - react 原生的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

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

在每次渲染时，效果将查看 products看看它是否改变了。

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

当您获得新产品时，您会更新您的 products状态。

这会导致效果再次运行。

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

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

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