三元运算符显示毫秒数，即使它是假的

Question

(对不起我的英语(
我是Reactjs的新手，我正在尝试开发一个用户可以创建Flashcard的应用程序
抽认卡必须有一个类别，因此，当用户在菜单中输入以列出和创建抽认卡时，如果没有创建任何类别，我希望在类别菜单之前显示一个短语供用户访问以创建类别
要做到这一点，我的列出抽认卡的组件会收到一个包含类别列表的Prop，如果列表为空，它会显示横幅，如果不是，它将显示组件的其余部分：

type Props = {
categorias: Categoria[];
};

const TarjetasList = ({ categorias }: Props) => { ...
return (
<>
{!categorias.length ? (
<h1>Debe crear una categoria</h1>
) : (
<>
<TarjetaFilter onSubmitFilter={handleSubmitFilter} />
<div>
{page?.content.map((tarjeta) => (
<div key={tarjeta.id}>
<TarjetaCard tarjeta={tarjeta} onDelete={getTarjetas} />
</div>
))}
</div>
<Pagination
pageCount={page ? page?.totalPages : 0}
range={2}
onChange={handlePageChange}
/>
</>
)}
</>
);
};

问题是当用户访问列出卡片的菜单时，它显示带有短语"的横幅；您必须创建一个类别"；持续几毫秒，即使"；！categori.length；为false，然后它停止显示它，并按原样显示组件的其余部分，但即使只有几毫秒，我也希望避免这种情况。有可能吗？我做错了什么？

这是打开卡片取消列表的菜单组件的代码：

const Tarjetas = () => {
const [categorias, setCategorias] = useState<Categoria[]>([]);
const getCategorias = useCallback(() => {
const config: AxiosRequestConfig = {
method: "GET",
url: "/categorias",
withCredentials: true,
};
requestBackend(config).then((response) => {
setCategorias(response.data.content);
});
}, []);
useEffect(() => {
getCategorias();
}, [getCategorias]);
return (
<Routes>
<Route index element={<TarjetasList categorias={categorias} />} />
<Route path=":tarjetaId" element={<TarjetasForm />} />
</Routes>
);
};

以下是TarjetasList组件的完整代码：

type ControlComponentsData = {
activePage: number;
filterData: TarjetaFilterData;
};
type Props = {
categorias: Categoria[];
};
const TarjetasList = ({ categorias }: Props) => {
const [page, setPage] = useState<SpringPage<Tarjeta>>();
const [controlComponentsData, setControlComponentsData] =
useState<ControlComponentsData>({
activePage: 0,
filterData: { texto: "", categoria: null },
});
const getTarjetas = useCallback(() => {
const config: AxiosRequestConfig = {
method: "GET",
url: "/tarjetas",
withCredentials: true,
params: {
page: controlComponentsData.activePage,
size: 3,
categoriaId: controlComponentsData.filterData.categoria?.id,
texto: controlComponentsData.filterData.texto,
},
};
requestBackend(config).then((response) => {
setPage(response.data);
});
}, [controlComponentsData]);
useEffect(() => {
getTarjetas();
}, [getTarjetas]);
const handlePageChange = (pageNumber: number) => {
setControlComponentsData({
activePage: pageNumber,
filterData: controlComponentsData.filterData,
});
};
const handleSubmitFilter = (data: TarjetaFilterData) => {
setControlComponentsData({
activePage: 0,
filterData: data,
});
};
return (
<>
{!categorias.length ? (
<h1>Debe crear una categoria</h1>
) : (
<>
<TarjetaFilter onSubmitFilter={handleSubmitFilter} />
<div>
{page?.content.map((tarjeta) => (
<div key={tarjeta.id}>
<TarjetaCard tarjeta={tarjeta} onDelete={getTarjetas} />
</div>
))}
</div>
<Pagination
pageCount={page ? page?.totalPages : 0}
range={2}
onChange={handlePageChange}
/>
</>
)}
</>
);
};

Answer 1

您的类别categorias最初为空。在加载它们之前，您将显示文本。

最简单的解决方案不是将categorias初始化为空列表，而是将其初始化为null:

const [categorias, setCategorias] = useState<Categoria[] | null>(null);

然后，您可以添加一个额外的渲染状态，直到加载categorias：

if (!categorias) {
return <h1>Cargando…</h1>
}
return (
<>
{!categorias.length ? (
<h1>Debe crear una categoria</h1>
) : (
...

然而，理想情况下，您将使用类似于的复杂结构来处理加载状态

{ isLoading: true, error: null, categorias: [] }

然后，您将能够正确区分何时显示加载指示和何时显示加载错误。