React项目中React Bootstrap Modal首次渲染默认打开问题求助

你遇到的Modal默认打开问题核心是TableForm组件的入参接收方式错误：React函数组件的第一个入参永远是完整的props对象，你当前直接把show、handleClose等属性拆成了独立入参，导致实际拿到的show变量是整个props对象，而非你传入的false布尔值。对象转布尔值默认为true，所以Modal会默认打开，你代码里打印的console.log(show)输出的也会是{show: false, handleClose: ƒ, ...}结构的对象，不是预期的布尔值。

两种修改方式二选一即可：

• 方式1：入参处直接解构props

// 给入参加括号解构props，同时建议替换any为明确类型提升TS校验能力
const TableForm = (
  { show, handleClose, onInputChange, addPost }: 
  { show: boolean, handleClose: () => void, onInputChange: (e: any) => void, addPost: (e: any) => Promise<void> }
) => {
  // 组件内部原有逻辑不需要改动
}

• 方式2：统一通过props对象取值

// 入参改为单个props对象
const TableForm = (props: any) => {
  const [validate, setValidate] = useState(false);

  const checkAndAddStarship = async (e: any) => {
    setValidate(true);
    try {
      await props.addPost(e);
      setValidate(false);
      props.handleClose();
    } catch (e) {
      window.alert(e);
    }
  };

  console.log(props.show); // 这里就会拿到正确的布尔值

  return (
    <Modal size="xl" centered show={props.show} onHide={props.handleClose}>
      <Modal.Header closeButton onClick={props.handleClose}>
        <Modal.Title>Add New Table</Modal.Title>
      {/* 后续原有代码不需要改动 */}

• Modal.Header的closeButton属性已经内置了点击触发onHide的逻辑，不需要额外绑定onClick={handleClose}，属于冗余代码可以直接删除
• 建议给所有props标注明确的TS类型，避免后续再出现类似传值错误

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