無限循環將參數傳遞給屏幕並將參數設置為 usestate 常量

Question

我有一個反應原生項目。 我正在嘗試將變量 object 作為屏幕之間的參數傳遞。 我有它，以便如果具有傳入參數的屏幕感應到檢測到參數，我希望它將參數 object 設置為 useState 常量的值。

我使用 navigation.navigate 傳入參數，如下所示：

    const newFilter = {
      home_type:selectedHomeTypes,
      minPrice: min,
      maxPrice: max,
      bathsMin: bathCount,
      bedsMin: bedCount,
      sqftMin: sqftMin,
      sqftMax: sqftMax,
    }
    navigation.navigate('HomeScreen', {newFilter: newFilter})

我在HomeScreen中有一個 if 語句，它應該檢測是否有route.params?.newFilter

它正在感應它並控制台在 function 中記錄正確的信息。 問題是，當它運行updateAppliedFilter()然后setAppliedFilter()我收到一個錯誤，這是一個無限循環問題。

錯誤：

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

子畫面：

const applyFilters = () => {
    const newFilter = {
      home_type:selectedHomeTypes,
      minPrice: min,
      maxPrice: max,
      bathsMin: bathCount,
      bedsMin: bedCount,
      sqftMin: sqftMin,
      sqftMax: sqftMax,
    }
    navigation.navigate('HomeScreen', {newFilter: newFilter})
  }

家長屏幕：

  const updateAppliedFilter = (filter) => {
    setAppliedFilters(filter)
  }

  if(route.params?.newFilter){
    console.log('filterFound')
    console.log(route.params.newFilter)
    updateAppliedFilter(route.params.newFilter)
  }

當我不運行setAppliedFilter時，它可以正常工作並渲染console.logs 1 次。 當我添加setAppliedFilter時，它會進入無限循環。

Answer 1

如果您導航到ParentScreen並通過route.params提供newFilter ，則將在 ParentScreen 內調用updateAppliedFilter並通過ParentScreen觸發setAppliedFilters更改，最終將重新渲染屏幕。 但是，在此重新渲染期間route.params不會更改（它們永遠不會設置為未定義），因此將一次又一次地調用updateAppliedFilter function。

您可以使用useEffect來保護它。

父屏幕

React.useEffect(() => {
    if (route.params?.newFilter) {
        updateAppliedFilter(route.params.newFilter);
    }
}, [route.params])