输入框插入图片后替换图标文本为预览图的实现问题

问题原因 #

当前代码里判断上传提示区域显示的条件是images !== null，但files.map()哪怕在files为空时，返回的也是空数组而非null，这就导致提示内容会一直显示，和图片预览重叠在一起。

修复后的代码 #

修改条件判断逻辑，只有当没有图片时才显示上传提示：

const images = files.map((file) => (
    <img
      key={file.name}
      src={file.preview}
      alt="image"
      style={{ width: "50%", height: "50%" }}
    />
));

<Flex width={{ sm: "340px", md: "450px" }}>
  {/* 存在图片时显示预览 */}
  {images.length > 0 && <div>{images}</div>}
  
  {/* 无图片时显示上传提示 */}
  {images.length === 0 && (
    <>
      <Box>
        <AiOutlineCloudUpload size={30} />
      </Box>
      <Box>
        <Text fontSize="sm"> Drop app logo here or{" "}
          <Button variant="link" color="#002c8a">browse</Button>
        </Text>
      </Box>
    </>
  )}
</Flex>

核心修改说明 #

• 用images.length > 0判断是否渲染图片预览，确保只有选中文件时才展示预览图
• 用images.length === 0控制上传提示的显示，仅在没有选中任何文件时展示图标和文本

内容的提问来源于stack exchange，提问作者user22125377