我试图在我的 react Hook 中使用 useEffect() 来在我的 Prop 更改时更新状态。但存在延迟,并且 useEffect 仅在我再次单击 Hook 中的元素后才会触发。我对使用钩子(Hook)相当陌生,任何帮助将不胜感激。谢谢
function ImageOrderSelect (props) {
const [clicked, setClicked] = useState(false)
const [options, setOptions] = useState(props.options)
const [current, setCurrent] = useState(props.current)
useEffect(() => {
setCurrent(props.current)
}, [props.current])
if(!clicked){
return (
<div className="image-order-select-icon" onClick={() => setClicked(!clicked)}>
<FontAwesomeIcon size="lg" icon={faCircle} />
<p>{current}</p>
</div>
)
} else if(clicked){
return (
<div className="image-order-select">
{optionsList}
</div>
)
}
}
最佳答案
useEffect(() => {
setTimeout(()=>{
setCurrent(props.current)
}, 1000)
}, [props.current])
您只需在显示当前内容之前添加超时/延迟...
或者最好的方法添加回调函数
useEffect(() => {
setCurrent(() => props.current)
}, [props.current])
关于reactjs - React Hook 延迟了 useEffect 触发?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57788721/