使用useEffect時如何在reactJS中寫if else語句？

Question

以下是我用來返回 Plotly 圖形的代碼，我需要在這里做的是當圖形數據為空或圖形上沒有任何內容時，我需要返回一條消息或不同的布局。 如果圖表沒有數據，則使用默認內容，例如沒有可用數據。 我怎么做？

 import React, { useEffect } from "react"; import Plot from "react-plotly.js"; import PropTypes from "prop-types"; let dataArray; let index; let obj; function PlotlyStackedChart({ labels, data, xTitle, yTitle, mainTitle, preHeading }) { useEffect(() => { dataArray = []; for (index = 0; index < data.length; index += 1) { obj = { x: labels, y: data[index].data, type: "bar", name: data[index].name, }; dataArray.push(obj); } }, [data]); return ( <> <Plot data={dataArray} layout={{ barmode: "stack", autosize: true, title: { text: preHeading + mainTitle, y: 0.9, }, margin: { t: 225, }, xaxis: { // all "layout.xaxis" attributes: #layout-xaxis title: { text: xTitle, font: { family: "Arial Black", }, }, // more about "layout.xaxis.title": #layout-xaxis-title // dtick: 1, }, yaxis: { // all "layout.yaxis" attributes: #layout-yaxis title: { text: yTitle, font: { family: "Arial Black", }, }, // more about "layout.yaxis.title": #layout-yaxis-title }, font: { // family: "Courier New, monospace", size: 12, color: "#7f7f7f", }, legend: { bgcolor: "transparent", x: 0, y: 1.4, xanchor: "auto", traceorder: "normal", orientation: "h", }, marker: { size: 40 }, }} useResizeHandler style={{ width: "100%", height: 600 }} /> </> ); } export default PlotlyStackedChart; PlotlyStackedChart.defaultProps = { xTitle: "", yTitle: "", mainTitle: "", preHeading: "", }; // Typechecking props for the MDDatePicker PlotlyStackedChart.propTypes = { labels: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired, xTitle: PropTypes.string, yTitle: PropTypes.string, mainTitle: PropTypes.string, preHeading: PropTypes.string, data: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]).isRequired, };

進一步解釋，如果圖中沒有 plot 的數據，我想返回以下代碼，否則返回當前檢索數據的代碼和圖中的 plot。

 return { "layout": { "xaxis": { "visible": false }, "yaxis": { "visible": false }, "annotations": [ { "text": "No matching data found", "xref": "paper", "yref": "paper", "showarrow": false, "font": { "size": 28 } } ] } }

Answer 1

如果沒有內容，您可以嘗試返回空的內容模板。

import React, { useEffect } from "react";
import Plot from "react-plotly.js";
import PropTypes from "prop-types";

let dataArray;
let index;
let obj;
function PlotlyStackedChart({ labels, data, xTitle, yTitle, mainTitle, preHeading }) {
  useEffect(() => {
   if(data?.length){ // <--- place condition here
     dataArray = [];
     for (index = 0; index < data.length; index += 1) {
       obj = {
         x: labels,
         y: data[index].data,
         type: "bar",
         name: data[index].name,
       };
       dataArray.push(obj);
     }
   }
  }, [data]);

  // Place this conditional return
  if(!data?.length) {
    return <>No data found</>
  }

  return (
    <>
      <Plot
        data={dataArray}
        layout={{
          barmode: "stack",
          autosize: true,
          title: {
            text: preHeading + mainTitle,
            y: 0.9,
          },
          margin: {
            t: 225,
          },
          xaxis: {
            // all "layout.xaxis" attributes: #layout-xaxis
            title: {
              text: xTitle,
              font: {
                family: "Arial Black",
              },
            }, // more about "layout.xaxis.title": #layout-xaxis-title
            // dtick: 1,
          },
          yaxis: {
            // all "layout.yaxis" attributes: #layout-yaxis
            title: {
              text: yTitle,
              font: {
                family: "Arial Black",
              },
            }, // more about "layout.yaxis.title": #layout-yaxis-title
          },
          font: {
            // family: "Courier New, monospace",
            size: 12,
            color: "#7f7f7f",
          },
          legend: {
            bgcolor: "transparent",
            x: 0,
            y: 1.4,
            xanchor: "auto",
            traceorder: "normal",
            orientation: "h",
          },
          marker: { size: 40 },
        }}
        useResizeHandler
        style={{ width: "100%", height: 600 }}
      />
    </>
  );
}

export default PlotlyStackedChart;

Answer 2

useEffect與您描述的問題完全無關。

如果您想在數組為空時呈現不同的內容，請在呈現邏輯中執行，而不是作為效果。

if (data.length === 0) {
    return <Loading />
} else {
   return <Plot .../>
}

---

也就是說，你的效果邏輯被打破了。 你不能只是將一個新數組分配給一個變量並讓 React 渲染它。 你沒有告訴 React 它需要重新渲染。 使data成為 state 變量（使用useState ）。