如何解决反应如何使功能与状态?
我正在学习 React Native 并且无法理解如何制作函数或组件而不是我的代码的重复部分:
export const PostScreen = () => {
const postId = 1
/* THIS PART IS REPEATED IN MANY FILES */
const [data,setData] = useState([]);
const [loader,setLoader] = useState(false);
const [error,setError] = useState(null);
const fetchData = async () => {
setError(null)
setLoader(true)
try {
const data = await Api.get(`http://localhost/api/posts/${postId}`)
if (data.success == 1) {
setData(data.data)
}
else {
setError(data.error)
}
}
catch(e) {
console.log(e)
setError('Some problems')
}
finally {
setLoader(false)
}
}
useEffect(() => {
fetchData()
},[])
if (loader) {
return <Loader />
}
if (error) {
return <View><Text>{error}</Text></View>
}
/*END>>> THIS PART IS REPEATED IN MANY FILES */
return (
<View><Text>{data.title}</Text></View>
)
}
问题是 fetchData 正在处理状态。我发现,如何用 Context 做到这一点,但我不会使用它。有没有办法在没有上下文的情况下做清晰的代码?
解决方法
那么,为什么不自己制作 hook 呢?
在专用模块中编写钩子:
function useMyOwnHook(props) {
const {
postId,} = props;
const [data,setData] = useState([]);
const [loader,setLoader] = useState(false);
const [error,setError] = useState(null);
const fetchData = async () => {
setError(null)
setLoader(true)
try {
const data = await Api.get(`http://localhost/api/posts/${postId}`)
if (data.success == 1) {
setData(data.data)
}
else {
setError(data.error)
}
}
catch(e) {
console.log(e)
setError('Some problems')
}
finally {
setLoader(false)
}
}
useEffect(() => {
fetchData()
},[])
const render = loader
? <Loader />
: error
? <View><Text>{error}</Text></View>
: null;
return {
data,render,}
}
此时,组件将被编写如下:
export const PostScreen = () => {
const postId = 1
const {
render,data,} = useMyOwnHook({ postId });
return render ?? (
<View><Text>{data.title}</Text></View>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。