React hook里面的promise甚至没有被触发!没有记录任何东西?

Question

为什么这个代码不能工作?我创建了这个自定义钩子来调用钩子useState:

export const useAnimer=({})=>{
const [animList, setAnimList] = useState({})
useEffect(()=>{
.......
onDone:(anim,name)=>{
console.log("anim list updating...")

setAnimList((a)=>{
console.log("anim list updated",a)
return a
})}
........
},[depedency])}

只打印

console.log(" anim_list updating")

但不打印

console.log(" anim_list updated")

这里的onDone在另一个文件。js中使用。它在asnyc函数中每100ms调用一次返回promise对象

const animIt = async (frame)=>{
while(true){
frame.pools.timepassed+=100
frame.pools.frames.forEach((a,i)=>{ 
a.onDone(a)           
})
await new Promise(resolve=>
setTimeout(()=>{
resolve()
},100))

}
}

}

Answer 1

首先，你不能以这种方式使用钩子a[name]=anim，你可以像这样为对象添加新值{…a，[name]: animm}，然后添加到你的状态:setAnimList({...a,[name]:anim})

第二，如果我是你，我会定义箭头函数并返回它，就像这样:

export const useAnimer=({})=> {
const [animList, setAnimList] = useState({})
const handleAddAnim = (anim, name) => {
setAnimList({...animList, [name]: anim})
}
return {
animList,
handleAddAnim
}

}

，当我想要使用它时，我将这样调用它:

const {animList, handleAddAnim} = useAnimer();

希望我能帮上忙