Question

here和here已回答了该问题，但是在遵循解决方案后，我仍然遇到相同的问题。

使用react-beautiful-dnd构建应用。 showMap是一个布尔值，当单击按钮时，该布尔值将从父组件传递。 showMap所做的只是

将3列网格变成5，反之亦然
重新排列网格上的项目

我注释掉useEffect和useCallback内部的依赖项，因为一旦将它们添加进去，就会出现无限循环。

那是为什么？

注意：：当useCallback的依赖数组为空时，我在fakeTrips内记录了useEffect的更新值，该值是正确的。使我感到震惊的是，如果此警告是某个地方的问题，那该怎么办。我也想知道为什么会这样。

const Grid = ({ showMap }) => {
  const [fakeTrips, setFakeTrips] = useState({
    tripsItems: {
      // tripItem1: {
      //   id: 'tripItem1',
      //   content: 'Stanley Park',
      // },
      // tripItem2: {
      //   id: 'tripItem2',
      //   content: 'Capilano',
      // },
      // tripItem3: {
      //   id: 'tripItem3',
      //   content: 'Terra Nova',
      // },
      // tripItem4: {
      //   id: 'tripItem4',
      //   content: 'English Bay',
      // },
      // tripItem5: {
      //   id: 'tripItem5',
      //   content: 'Keg',
      // },
      // tripItem6: {
      //   id: 'tripItem6',
      //   content: 'Top Shanghai',
      // },
      // tripItem7: {
      //   id: 'tripItem7',
      //   content: 'Bottom Shanghai',
      // },
    },
    columns: {
      column1: {
        id: 'column1',
        tripItemIds: [],
      },
      column2: {
        id: 'column2',
        tripItemIds: [],
      },
      column3: {
        id: 'column3',
        tripItemIds: [],
      },
      column4: {
        id: 'column4',
        tripItemIds: [],
      },
      column5: {
        id: 'column5',
        tripItemIds: [],
      },
    },
    columnOrder: ['column1', 'column2', 'column3', 'column4', 'column5'],
  })

  const originalThreeColumns = {
    column1: {
      id: 'column1',
      tripItemIds: [],
    },
    column2: {
      id: 'column2',
      tripItemIds: [],
    },
    column3: {
      id: 'column3',
      tripItemIds: [],
    },
  }

  const originalFiveColumns = {
    column1: {
      id: 'column1',
      tripItemIds: [],
    },
    column2: {
      id: 'column2',
      tripItemIds: [],
    },
    column3: {
      id: 'column3',
      tripItemIds: [],
    },
    column4: {
      id: 'column4',
      tripItemIds: [],
    },
    column5: {
      id: 'column5',
      tripItemIds: [],
    },
  }

  const threeColumnOrder = ['column1', 'column2', 'column3']
  const fiveColumnOrder = [
    'column1',
    'column2',
    'column3',
    'column4',
    'column5',
  ]

  /**
   * Turn the grid from 3-to-5 or 5-to-3 column orientation when
   * user toggles map and reorganize all trip items on the grid.
   *
   * TODO: currently there is an react-hooks/exhaustive-deps warning
   * TODO: which I can't figure out. adding any deps creates an infinite loop
   */
  const onToggleMap = useCallback(
    (originalColumns, maxColLength, columnOrder) => {
      const allTripItemsArr = Object.values(fakeTrips.columns)
      const valuesToMove = []

      let limit = 1

      let i = 0
      let j = 0
      let totalLengthOfAllItems = 0

      allTripItemsArr.forEach(
        item => (totalLengthOfAllItems += item.tripItemIds.length),
      )

      while (valuesToMove.length < totalLengthOfAllItems) {
        if (i > allTripItemsArr.length - 1) {
          i = 0
          limit += 1
        }
        j = limit - 1
        while (j < limit) {
          const val = allTripItemsArr[i].tripItemIds[j]
          if (val) {
            valuesToMove.push(val)
          }
          j++
        }
        i++
      }

      let x = 1
      i = 0
      while (i < totalLengthOfAllItems) {
        if (x === maxColLength) x = 1
        originalColumns[`column${x}`].tripItemIds.push(valuesToMove[i])
        x += 1
        i += 1
      }

      const updatedTripsObject = {
        ...fakeTrips,
        columns: {
          ...{},
          ...originalColumns,
        },
        columnOrder: [...[], ...columnOrder],
      }
      setFakeTrips(updatedTripsObject)
    },
    [ // fakeTrips ],
  )

  useEffect(() => {
    console.log('showMap', showMap)

    if (showMap) onToggleMap(originalThreeColumns, 4, threeColumnOrder)
    else if (showMap !== null)
      onToggleMap(originalFiveColumns, 6, fiveColumnOrder)

    console.log('fakeTrips', fakeTrips)

  }, [
    onAddNewTripItem,
    onToggleMap,
    // showMap,
    // originalThreeColumns,
    // originalFiveColumns,
    // threeColumnOrder,
    // fiveColumnOrder,
    // fakeTrips,
  ])

...

这些是我看到的警告。

  Line 283:5:   React Hook useCallback has a missing dependency: 'fakeTrips'. Either include it or remove the dependency array                                                                                                       react-hooks/exhaustive-deps
  Line 296:6:   React Hook useEffect has missing dependencies: 'fakeTrips', 'fiveColumnOrder', 'originalFiveColumns', 'originalThreeColumns', 'showMap', and 'threeColumnOrder'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

反应挂钩-向useCallback / useEffect添加详尽的依赖关系导致无限循环

0 个答案: