这已经在这里和这里得到了回答,但是在遵循解决方案后我仍然遇到同样的问题。
使用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