next.js 如何在不触发按钮的情况下从子组件更改父状态？

Question

我有一个 SlaTable 组件来计算和显示 table 个时间值。

在此table下方，我想根据SlaTable的计算值显示图表。

我如何 return 来自 SlaTable 的值在另一个组件中使用它们？

<SlaTable
  times={times}
  monthList={monthList}
  balanceValue={balanceValue}
  slaFilter={slaFilter}
  billableFilter={billableFilter}
/>


<Diagram 
 labels={chartLabels}
 values={chartValues}
/>

提前致谢

弗兰克

Answer 1

我想我找到了答案。

我必须在我的组件中使用 useEffect。所以我的解决方案是这样的：

import { useState } from "react";
function Sla(props) {
const [chartData, setChartData] = useState([]);
const changeChartData = (arg) => {
    setChartData(arg);
  };

return (
  <>
   <SlaTable
     times={times}
     monthList={monthList}
     balanceValue={balanceValue}
     slaFilter={slaFilter}
     billableFilter={billableFilter}
     changeChartData={changeChartData}
   />
  </>
)
}

在 SlaTable 组件内部是这样的：

import { useEffect } from "react";
function SlaTable(props) {
  const changeChartData = props.changeChartData;
  const monthList = props.monthList;
  
  let totalMonth = [];

  // ----------------------------------------
  // fill total month with zeros
  // ----------------------------------------

  monthList.forEach(() => {
    totalMonth.push(0);
  });

  // call the changeChartData function when component 
  // finished rendering
 
  useEffect(() => {
    changeChartData(totalMonth);
  }, [totalMonth.length]);

  return (
   <>
    HTML output
   </>
   );
}

如果我不在组件内部使用 useEffect，我会得到一个错误，我 无法在呈现不同组件时更新组件

next.js 如何在不触发按钮的情况下从子组件更改父状态？

next.js how to change parent state from child component without triggering a button?

components

reactjs