Reactjs 做出疯狂的反应

我正在使用React钩子和功能组件。在我的功能组件中，发生了一些奇怪的事情，我想不出解决的办法。在useEffect中，最初我没有返回数组来防止无休止的循环，并试图在deleteClickedHandler中使用rowData，但它始终为空。在一些研究表明解决这一问题的方法是使用useRef，这似乎可行，但引起了ESLinter的愤怒，他们要求将rowData放入数组中，从而导致对useEffect进行重新渲染。这会导致deleteClickedHandler从rowDataRef.current接收数据，但会导致无休止的循环

deleteClickedHandler正在执行乐观并发、更改rowData状态以及与api交互

几个小时后，我不知道如何解决这个问题

如果我从告诉useEffect何时重新渲染的数组中移除rowData，则删除处理程序可以工作但不会重新渲染，并且由于deleteClickedHandler是一个处理程序，因此我无法确定如何在没有无休止循环的情况下重新渲染

我确信我做了一些愚蠢的事情，但无法确定为什么deleteClickedHandler中没有rowData-我知道该处理程序是闭包的一种形式，但rowData是状态

const initialState = {
  id: 0,
  credit: false,
  transactionAmount: 0,
  accountBalance: 0,
  transactionDate: new Date(),
  confirmation: "",
  comment: "",
  action: "EDIT",
};

const SERVER_URL='/api/checking';  //process.env.REACT_APP_SERVER_URL;

function Checking() {
  const [rowData, setRowData] = useState([]);
  const [newData, setNewData] = useState(initialState);
  const [displayModal, setModalDisplay] = useState(false);
  const columnDefinitions = Columns();
  const rowDataRef = useRef(rowData);

  useEffect(() => {
    fetch(SERVER_URL)
      .then((response) => response.json())
      .then((rowData) => setRowData(rowData));

    rowDataRef.current = rowData;
  }, [rowData]);

  function deleteClickedHandler(props) {
    let fetchUrl = SERVER_URL + "/" + props.id;
    let balance = 0.0;
    let transactionAmount = 0.0;
    let data = rowDataRef.current;

    if (
      data.length > 0 &&
      window.confirm("Are you sure you wish to delete transaction: " + props.id)
    ) {
      for (let i = 0; i < data.length; i++) {
        transactionAmount = props.credit
          ? props.transactionAmount
          : -1.0 * props.transactionAmount;
        balance = balance + transactionAmount;

        if (data[i].id === props.id) {
          data.splice(i, 1);
        }

        if (data[i].id > props.id) {
          data[i].accountBalance = balance;
        }
      }

      setRowData(data);
      CustomFetch(fetchUrl, "DELETE");
    }
  }

  function rowActionHandler(props) {
    switch (props.action) {
      case "DELETE":
        deleteClickedHandler(props);
        break;
      default:
        break;
    }
  }

  const context = { componentParent: rowActionHandler };

---

虽然这并不理想，但有一个变通方法，与我手动操作的方法相同。这是使用下面的语句强制重新加载页面。如果有人能提供一种状态方法，我很乐意改变这个答案

window.location.reload();

---

您希望

useffect

什么时候运行？从我所看到的，效果本身将导致无限重渲染+请求，除了您上面所描述的。我希望它在加载和rowData更改时运行

window.location.reload();