如果兩個不同的依賴 arrays 同時更新，react useEffect 如何更新數據

Question

所以我有兩個不同的 useEffect 和 dependency arrays 是不同的。

 const [dateFilterSort, setDateFilterSort] = useState({
    queryText: initialQueryText(params.sortName),
    cardText: initialCardText(params.sortName),
    start: params.startDate
      ? moment(params.startDate).startOf('day').toDate()
      : undefined,
    end: params.endDate
      ? moment(params.endDate).endOf('day').toDate()
      : undefined,
  });

 useEffect(() => {
    if (params.endDate) {
      setDateFilterSort({
        ...dateFilterSort,
        end: moment(params.endDate).endOf('day').toDate(),
      });
    }
  }, [params.endDate]);

  useEffect(() => {
    if (params.startDate) {
      setDateFilterSort({
        ...dateFilterSort,
        start: moment(params.startDate).startOf('day').toDate(),
      });
    }
  }, [params.startDate]);

這里的問題是 params.endDate 和 params.startDate 同時更新。 所以 dateFilterSort.start 得到正確更新，但由於 dateFilterSort.end 在上面，dateFilterSort.end 被第二個 useEffect 覆蓋。

有什么辦法可以解決這個問題嗎？

我想我可以像下面這樣放置兩個 useEffect。

    useEffect(() => {
      if (params.startDate) {
        setDateFilterSort({
          ...dateFilterSort,
          start: moment(params.startDate).startOf('day').toDate(),
        });
      }
      if (params.endDate) {
        setDateFilterSort({
          ...dateFilterSort,
          end: moment(params.endDate).endOf('day').toDate(),
        });
      }
    }, [params.startDate, params.endDate]);

這導致了無限循環......

另外，只是為了看看我是否可以更新 params.end，我使用 setTimeout 但再次導致無限循環....

 useEffect(() => {
    if (params.endDate) {
      setTimeout(() => {
        setDateFilterSort({
          ...dateFilterSort,
          end: moment(params.endDate).endOf('day').toDate(),
        });
      }, 500);
    }
  }, [params.endDate]);

  useEffect(() => {
    if (params.startDate) {
      setDateFilterSort({
        ...dateFilterSort,
        start: moment(params.startDate).startOf('day').toDate(),
      });
    }
  }, [params.startDate]);

Answer 1

我最近遇到了類似的問題。 在我的例子中，第二個 setter 覆蓋了第一個。

我想到的一個好的解決方案是首先在本地進行必要的更改，然后只設置一次 state：

useEffect(() => {
  // Choose your favorite copy technique,
  // I'll go with spread operator for simplicity
  const dateFilterSortCopy = { ...dateFilterSort }
  
  if (params.startDate) {
    dateFilterSortCopy.startDate = moment(params.startDate).startOf('day').toDate()
  }
  
  if (params.endDate) {
    dateFilterSortCopy.endDate = moment(params.startDate).startOf('day').toDate()
  }

  setDateFilterSort(dateFilterSortCopy);
}, [params.startDate, params.endDate]);

這也節省了不必要的重新渲染。