三元运算符在几毫秒内显示真实的部分，即使它是假的

Question

（对不起我的英文）
我是 Reactjs 的新手，我正在尝试做一个用户可以创建抽认卡的应用程序。
抽认卡必须有一个类别，所以当用户进入菜单列出和创建抽认卡时，如果没有创建任何类别，我想在类别菜单之前显示一个短语供用户访问以创建类别。
为此，我列出抽认卡的组件会收到一个带有类别列表的 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}
              />
            </>
          )}
        </>
      );
    };

问题是，当用户访问列出卡片的菜单时，它会显示带有短语“您必须创建类别”的横幅几毫秒，即使“!categoria.length”是假的，然后它停止显示它并显示它应该显示的组件的其余部分，但即使只有几毫秒，我也想避免这种情况。可能吗？我做错了什么？

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

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: [] }

这样你就可以正确区分什么时候显示加载提示，什么时候显示加载错误

三元运算符在几毫秒内显示真实的部分，即使它是假的

Ternary operator shows for milliseconds the truthy part even when it's false

reactjs

operator-keyword

ternary