时间戳

首页 > 解决方案 > 数据更改时不会触发 useEffect

javascript - 数据更改时不会触发 useEffect

问题描述

我用过滤器创建了一个表。每件事都运作良好。后来，我想将过滤器从材质 ui 更改为 Core ui。我创建了一个过滤器并尝试在移动之前对其进行测试。但它没有用。useEffect 无论如何都不会触发的问题。我什至尝试放置变量 x 并在单击发生时将其递增，并将其作为参数放入 useEffect 中。但什么也没发生。

函数 renderTableData（每次我选择过滤器时都会渲染我的表）函数 onSiteChange（当我选择过滤器时触发函数）函数 UpdateTableData（将第一次提供我的表）

谢谢你

******************************** RENDER TABLE *********************
  const renderTableData = () => {
    return (
      <div className="selectTable">
        <div
          className="ag-theme-alpine"
          style={{
            height: "75vh",
            width: "110wh",
            alignContent: "center",
            alignItems: "center",
            alignSelf: "center",
          }}
        >
          <AgGridReact
            rowData={dataFiltred}
            rowHeight={rowHeight}
            rowStyle={{ textAlign: "center" }}
          >
            <AgGridColumn field="Pseudo"></AgGridColumn>
            <AgGridColumn field="Site"></AgGridColumn>
            <AgGridColumn field="Langue"></AgGridColumn>
            <AgGridColumn field="Actif_Inactif"></AgGridColumn>
            <AgGridColumn field="Date_Formation"></AgGridColumn>
            <AgGridColumn field="Formateur"></AgGridColumn>
            <AgGridColumn field="Nature_Formation"></AgGridColumn>
            <AgGridColumn field="Durée"></AgGridColumn>
            <AgGridColumn field="Action"></AgGridColumn>
          </AgGridReact>
        </div>
      </div>
    );
  };

  // ********************************* logic *********************

  function onSiteChange(value, type) {
    if (type === "Site") {
      value.forEach((elem) => {
        rowData.forEach((data) => {
          if (data["Site"] === elem["value"]) {
            dataSiteFiltred.push(data);
          }
        });
      });
      console.log(dataSiteFiltred);
      if (dataSiteFiltred.length) {
        dataFiltred = [];
        dataSiteFiltred.forEach((elem94) => {
          dataFiltred.push(elem94);
        });
      }
    }
  }

  function updateTableData() {
    if (!dataFiltred.length) {
      rowData.forEach((elem) => {
        dataFiltred.push(elem);
      });
    }
  }
  updateTableData();

  useEffect(
    () => {
      renderTableData();
      console.log("fired");
    },
    [dataFiltred],
    [dataSiteFiltred]
  );

标签： javascriptreactjsreact-hooksuse-effectcore-ui

解决方案

您没有使用任何状态，或更改不会导致重新渲染和 useEffect 相应的状态或道具

您将需要将您的dataFiltred和dataSiteFiltred存储在一个状态中，然后对其进行更新以导致重新渲染/使用效果。

像这样的东西：

const [dataFiltred, setDataFiltred] = useState([]);

并像这样更新您的状态：

setDataFiltred([...dataFiltred, elem94]);

useEffect 只接受一个依赖数组

因此，如果您想同时查看两个数组，请执行以下操作：

 useEffect(
    () => {
      renderTableData();
      console.log("fired");
    },[dataFiltred, dataSiteFiltred]
  );

如果在数组更改后它没有激活 useEffect，你可以考虑使用 Array.length

 useEffect(
    () => {
      renderTableData();
      console.log("fired");
    },[dataFiltred.length, dataSiteFiltred.length]
  );

推荐阅读