ReactJS

Question

我目前正在做一个需要使用图表的项目，所以我选择了 chartsjs，但我面临一个小问题，它有两个部分。

当页面第一次加载时，我的数据没有显示，有些 graphs/data 显示为未定义（我知道当我设置这样的对象时它应该如何工作“obj? .smt"), 我不知道在加载完成之前是否有办法屏蔽它。
正如您在 GIF 上看到的那样，每当页面重新加载时，图形都会闪烁，这让我有点担心，这个页面将至少有 50 个图形（不是我的想法），所以如果它闪烁是否意味着它正在渲染 2 次？还是更深入？

useEffect(() => {
    const fetchDreData = async () => {
      try {
        const res = await http.get("/endpoint1");
        const data = await res.data;
        const final = data.data;
        // console.log(final);
        setEstimatedMonths(final);
      } catch (e) {
        console.log("error", e);
      }
    };
    const fetchProductsData = async () => {
      try {
        const res = await http.get("/endpoint2");
        const data = await res.data;
        const final = data.data;
        // console.log(res);
        setEstimatedProducts(final);
      } catch (e) {
        console.log("error", e);
      }
    };
    fetchDreData();
    fetchProductsData();
  }, [control]);

  useEffect(() => {
    flatData();
  }, [estimatedProducts, estimatedMonths]);

  useLayoutEffect(() => {
    chart();
  }, [values]);

快速解释这里发生的事情。在第一个 useEffect 中，有 2 个调用到不同的端点，并且来自它的数据被设置为两个不同的状态。在调用 flatData() 的 2º 上，来自 2 个状态的一些数据正在被操纵，因为无论谁做后端，都决定应该在前端计算一些东西。最后一个是一个大对象，来自各个地方的数据汇集在一起，设置在图表中。

我不知道这些是由我犯的一些愚蠢的错误引起的，还是 ChartJS 的行为方式。

Answer 1

你可以输入console.log或console.count来查看它是如何执行的。

我的猜测是 flatData 调用了两次，一次是 estimatedProducts 的值发生变化，一次是 estimatedMonths 的值发生变化。如果 values 来自那里，那么第一个组件没有数据，在一个 API 调用完成后它设置一个状态并更新，在第二个 API 调用它再次更新。

您可以在 1 个函数中合并 2 个 API 调用并设置状态 1 次。

或者把condition放在useEffect

  useEffect(() => {
    if (estimatedProducts && estimatedMonths) {
      flatData();
    }
  }, [estimatedProducts, estimatedMonths]);

ReactJS - 来自 ChartJS 的图表在第一页加载后重新呈现

ReactJS - Charts from ChartJS re-rendering after first page load

charts

react-hooks