如何仅在有变化时渲染 api 调用

Question

#在下面的代码中：我使用了 useEffect 钩子。我正在调用 apiData()（它有来自 api 的对象数组）。 从 API 中，我们获取 id、名称、父名称、isActive。 isActive 与更改的切换映射。我需要更新更改并检索它。所以我用过产品。但正因为如此，整个数据被一次又一次地调用。有没有其他方法可以解决这个问题。 #

const [products, setProducts] = useState([]);
const transformData = (data) => {
    return data.map((item) => ({
      id: item.structureId,
      name: item.name,
      parent: item.parentName,
      isActive: item.isActive,
    }));
  };
 useEffect(() => {
    apiData()
      .then((data) => {
        const transformedData = transformData(data);
        setProducts(transformedData);
      })
      .catch((error) => console.error("Error in fetching data:", error));
  }, [products, transformData]);

Answer 1

isActive 与更改的切换映射。我需要更新更改并检索它。

您的意思是需要不断检查 API 是否有更新？因为如果你这样做，那么你需要使用类似 EventStream （或者可能是 pub/sub）的东西。但这需要对前端和后端进行更改。您不能一遍又一遍地重新发送相同的 API 调用，因为这会给后端带来很大（且不必要）的压力。