[英]React useEffect and useCallback linting error - missing dependency
即使我在定義它的父組件中使用推薦的 useCallback 鈎子,Linter 也抱怨缺少作為依賴項的函數。
有誰知道如何解決這一問題? 似乎無法在任何地方找到示例
此處鏈接到沙箱https://codesandbox.io/s/hopeful-wind-w4sp5
const arr = ['One', 'Two', 'Three']
const SyncingData = () => {
const [progress, setProgress] = useState(0)
const [children, setChildrenProgress] = useState(arr.map(item => 0))
const handleChildrenProgress = useCallback(
(progress, index) => {
setChildrenProgress(
children.map((item, currIndex) =>
index === currIndex ? progress : item,
),
)
},
[children],
)
useEffect(() => {
setProgress(
children.reduce((sum, item) => (sum = sum + item), 0) / children.length,
)
}, [children])
return (
<div>
<div>Total Progress: {progress}</div>
<ul>
{arr.map((item, index) => (
<Child
key={index}
index={index}
updateProgress={handleChildrenProgress}
name={item}
delay={10 * index}
/>
))}
</ul>
</div>
)
}
const Child = ({updateProgress, name, index, delay}) => {
const [progress, setProgress] = useState(0)
// This is the useEffect the linter doesn't like
useEffect(() => {
updateProgress(progress, index)
}, [progress, index])
useInterval(() => {
if (progress < 100) {
setProgress(progress + 1)
}
}, delay)
return (
<div>
{name} {progress}
</div>
)
}
我認為您應該嘗試在效果的依賴項列表中添加“updateProgress”:
useEffect(() => {
updateProgress(progress, index)
}, [progress, index, updateProgress])
函數 updateProgress 包含在您提供的 lambda 中。
linter 試圖告訴您,如果該函數發生更改,則效果將不會考慮該更改。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.