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

问题描述

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

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

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

我注释掉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',column3: {
        id: 'column3',column4: {
        id: 'column4',column5: {
        id: 'column5',columnorder: ['column1','column2','column3','column4','column5'],})

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

  const originalFiveColumns = {
    column1: {
      id: 'column1',column4: {
      id: 'column4',column5: {
      id: 'column5',}

  const threeColumnorder = ['column1','column3']
  const fiveColumnorder = [
    'column1','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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）