有时候，我们必须在react状态下管理状态。
比如我们有一个提交表单，我们要管理表单的状态。
表达状态的方式有很多种。
我会介绍一下表达身份的坏例子。
坏榜样
1、用物体来表达状态。
这是一个不好的例子，因为状态非常复杂。
当您更新状态时，您必须更新所有状态。
此示例中只有三种状态模式。
但是当你用一个对象来表达状态时，读者无法理解只有三种模式。
所以这是一个坏例子。
2.用索引来表示状态。
这是一个非常简单的例子。
但这个例子也有一个问题。
当你使用索引来表达状态时，你必须记住状态号。
如果您需要添加新状态，则必须更新所有状态编号。
所以，这也不是一个好例子。
3.为每个状态创建状态。
这也不是一个好例子。
你必须一直管理函数中的所有状态。
如果您忘记更新状态，这将是一个错误。
重置功能也很复杂。
推荐
使用字符串来表达状态。
这是一个非常简单的例子。
而且您可以轻松了解状态。
当您需要添加新状态时，您可以轻松添加新状态。
当然这个例子也有缺点。
无法同时表示加载状态和成功状态。
但我觉得这并不是什么大问题。
所以如果你在react状态下管理状态，我建议使用字符串来表达状态。
结论
在react状态中管理状态时，使用字符串来表达状态。
这非常简单易懂。
并且您可以轻松添加新状态。
如果使用对象或索引来表达状态，则在添加新状态时必须更新所有状态。
所以，我建议使用字符串来表达状态。
感谢您的阅读。
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 });
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}}
);
};
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}}
);
};