有时候，我们必须在react状态下管理状态。
比如我们有一个提交表单，我们要管理表单的状态。
表达状态的方式有很多种。
我会介绍一下表达身份的坏例子。
坏榜样
1、用物体来表达状态。
const page = () => {
const [status, setstatus] = usestate<{ loading: boolean, error: boolean, success: boolean }>({ loading: false, error: false, success: false });
const fetchuser = async () => {
setstatus({ loading: true, error: false, success: false });
try {
const user = await api.getuser();
setstatus({ loading: false, error: false, success: true });
} catch (e) {
setstatus({ loading: false, error: true, success: false });
}
};
return (
<>
{status.loading && loading...}
{status.error && error...}
{status.success && success...}
);
};
这是一个不好的例子，因为状态非常复杂。
当您更新状态时，您必须更新所有状态。
此示例中只有三种状态模式。
// loading
setstatus({ loading: true, error: false, success: false });
// success
setstatus({ loading: false, error: false, success: true });
// error
setstatus({ loading: false, error: true, success: false });
但是当你用一个对象来表达状态时，读者无法理解只有三种模式。
所以这是一个坏例子。
2.用索引来表示状态。
const page = () => {
const [status, setstatus] = usestate<0 | 1 | 2 | 3>(3);
const [user, setuser] = usestate(null);
const fetchuser = async () => {
setstatus(0);
try {
const user = await api.getuser();
setuser(user);
setstatus(2);
} catch (e) {
setstatus(1);
}
};
const reset = () => {
setuser(null);
setstatus(3);
};
return (
<>
{status === 0 && loading...}
{status === 1 && error...}
{status === 2 && {user?.name}}
);
};
这是一个非常简单的例子。
但这个例子也有一个问题。
当你使用索引来表达状态时，你必须记住状态号。
如果您需要添加新状态，则必须更新所有状态编号。
所以，这也不是一个好例子。
3.为每个状态创建状态。
const page = () => {
const [loading, setloading] = usestate(false);
const [error, seterror] = usestate(false);
const [success, setsuccess] = usestate(false);
const [user, setuser] = usestate(null);
const fetchuser = async () => {
setloading(true);
try {
const user = await api.getuser();
setuser(user);
setsuccess(true);
} catch (e) {
seterror(true);
}
};
const reset = () => {
setuser(null);
setloading(false);
seterror(false);
setsuccess(false);
};
return (
<>
{loading && loading...}
{error && error...}
{success && {user?.name}}
);
};
这也不是一个好例子。
你必须一直管理函数中的所有状态。
如果您忘记更新状态，这将是一个错误。
重置功能也很复杂。
推荐
- 使用字符串来表达状态。
const Page = () => {
const [status, setStatus] = useState<'loading' | 'error' | 'success' | 'idle'>('idle');
const [user, setUser] = useState(null);
const fetchUser = async () => {
setStatus('loading');
try {
const user = await api.getUser();
setUser(user);
setStatus('success');
} catch (e) {
setStatus('error');
}
};
const reset = () => {
setUser(null);
setStatus('idle');
};
return (
<>
{status === 'loading' && Loading...}
{status === 'error' && Error...}
{status === 'success' && {user?.name}}
);
};
这是一个非常简单的例子。
而且您可以轻松了解状态。
当您需要添加新状态时，您可以轻松添加新状态。
当然这个例子也有缺点。
无法同时表示加载状态和成功状态。
但我觉得这并不是什么大问题。
所以如果你在react状态下管理状态，我建议使用字符串来表达状态。
慧科企业网站管理系统1.0
下载
慧科企业网站管理系统是慧科研发中心专业为企业建站而开发的一款网站程序。该系统采用最简单易用的asp+access进行搭建，可二次开发拥有完善的网站前后台，并特别根据企业网站的特点开发出独具特色的栏目和功能。是企业建站的绝佳选择！系统三大特色：1、全静态：全站生成.html静态页面。降低服务器压力，增强百度收录。2、高优化：特别针对搜索引擎进行优化处理，让客户快速找到你。3、够简单：拥有完善后台管理
结论
在react状态中管理状态时，使用字符串来表达状态。
这非常简单易懂。
并且您可以轻松添加新状态。
如果使用对象或索引来表达状态，则在添加新状态时必须更新所有状态。
所以，我建议使用字符串来表达状态。
感谢您的阅读。
