如何解决反应挂钩-向useCallback / useEffect添加详尽的依赖关系导致无限循环
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',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 举报,一经查实,本站将立刻删除。