React组件问题：如何正确关闭Card组件且不影响后续打开

你的问题出在关闭组件时把fileName设为了false，而初始状态是空字符串，后续选择文件时的状态判断逻辑因此出现异常。

问题原因 #

组件的显示逻辑是{fileName && <Card ...>}：

• 初始状态fileName为空字符串""（假值），Card不显示
• 选中文件后，fileName被设为文件名（非空字符串，真值），Card显示
• 关闭时设为false（假值），Card隐藏，但此时fileName的类型变为布尔值
• 下次选择文件时，即使传入文件名（字符串），也会因之前的布尔值状态导致判断逻辑异常，无法触发Card重新显示

修复方案 #

关闭组件时，将fileName重置为初始的空字符串，而非false：

<CloseIcon onClick={() => setFileName("")}/>

修改后的完整组件示例 #

export default function DisplaySelectedFile() {
  const [fileName, setFileName] = useState("");
  
  return (
    <div>
      <SelectFileButton setFileName={setFileName} />

      {fileName && (
        <Card sx={styles.CommonStyle}>
          <Stack 
            spacing={10} 
            direction="row" 
            style={{paddingTop: "20px", paddingLeft: "10px"}}
          >
            <div>{fileName}</div>

            <Stack spacing={3} direction="row">
              <div>Convert to</div>
              <ConvertToFormatFile></ConvertToFormatFile>
            </Stack>

            <Button>CONVERT</Button>
            <CloseIcon onClick={() => setFileName("")}/>
          </Stack>
        </Card>
      )}
    </div>
  );
}

这样修改后，关闭操作会把状态重置为初始的空字符串，下次选择文件时，setFileName传入非空文件名后，fileName && ...的判断会再次成立，Card就能正常重新显示。

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