reactjs - 检查 typescript 中的 never[]

Question

我有一个 react 组件，应该列出用户正在上传的图像。 当用户没有时。

const [imageList, setImageList] = useState([]); 
const BlaLabel = () => (!imageList || imageList.length === 0) ? "No image loaded" : "Image(s) loaded";
return(<>...<BlaLabel/>...</>)

这不起作用，在用户执行任何操作之前会显示文本“已加载图像”。一些观察:

• typeof(imageList) 是“对象”
• imageList 的 typescript 类型是“never[]”
• JSON.stringify(imageList) 为“[]”。

如果我添加

|| imageList === [] 

就目前的情况来看，一切都运转良好。但我的问题是我不太明白......

never[] 是字符串化为“[]”的对象吗？这是我需要对“空”和“未定义”进行的另一项检查吗？ a === [] 和 a.length === 0 之间有什么区别。当谷歌搜索这个时，这对任何人来说似乎都不是一个大问题，所以希望我误解了一些东西。

简而言之。如何正确检查 imageList(上面)是否未设置

Answer 1

我遇到的第一个错误是，您尝试输入的字符串不是 JSX 元素，但必须是。所以我包装<p> 。第二次添加了button与 onClick()模仿添加并检查文本是否发生变化。

import "./styles.css";
import React from "react";

type ImageProps = {
  url?: string;
};

export default function App() {
  const [imageList, setImageList] = React.useState<ImageProps[]>([]);
  const BlaLabel = () =>
    !imageList || imageList.length === 0 ? (
      <p>No image loaded</p>
    ) : (
      <p>Image(s) loaded</p>
    );
  return (
    <>
      <BlaLabel />
      <button
        onClick={() => {
          setImageList((oldArray) => [...oldArray, { url: "/asd" }]);
        }}
      >
        Add Image
      </button>
    </>
  );

这是CodeSandbox