is_focus 第一次是false, 第二次是true。 如果我不写useEffect的话,is_focus一直都是false,都是第一次的props的内容。 这样正常嘛?必须要在useEffect中 更新props的值?props上面的其他数据也一样,console.log props的数据是更新的,但是useState 之后还是第一次的数据
export default function UserInfo(props: IProps) {
const [is_focus, setFocus] = useState(props.is_focus)
// is_focus 第一次是false, 第二次是true。 如果我不写useEffect的话,is_focus一直都是false,都是第一次的props的内容。 这样正常嘛?必须要在useEffect中 更新props的值?
useEffect(() => {
setFocus(props.is_focus)
}, [props.is_focus, props.created_id])
const handleFocus = useCallback(() => {
props.dispatch({
type: `${commonSpace}/changeFollow`,
payload: {
uid: props.created_id
},
callback: () => {
setFocus(!is_focus)
}
})
}, [is_focus, props.is_focus, props.created_id])
return (
<View className='userInfoBox'>
<Image className='userAvatar' src={props.src} />
<Text className='userName'>{props.nickname}</Text>
<Button
onClick={handleFocus}
className={is_focus ? 'userStatus checked' : 'userStatus'}
hover-class='hover'
>
{is_focus ? '已关注' : '关注'}
</Button>
</View>
)
}
第一种情况是正常的,useState 他只会在函数执行时调用一次,给一个初始值。
后续的更新 state 需要借助 useEffect 来实现。
推荐两篇文章:
【译】什么是React Hooks:https://segmentfault.com/a/11...
精读《Function Component 入门》:https://segmentfault.com/a/11...