React中NotifyUser组件仅首次渲染，后续表单提交不显示问题求助

你的问题出在两个核心点：

1. NotifyUser组件内部状态未重置：第一次提交后，组件的isVisible状态在超时后变为false，后续如果传入的提示内容或类型没有变化（比如连续两次提交无效邮箱），组件不会重新触发副作用来重置isVisible，导致提示不再显示。
2. 父组件状态未触发重新渲染：如果两次提交的邮箱验证结果相同（比如两次都是无效），isValidEmail状态值没有变化，NotifyUser组件不会重新挂载，内部的isVisible保持之前的false状态。

下面是两种可行的修复方案：

方案一：让NotifyUser感知props变化，重置显示状态 #

修改NotifyUser.js，在副作用的依赖数组中加入msg和type，确保每次提示内容或类型变化时，重置isVisible为true：

import { useState, useEffect } from "react";
import "./notifyUser.css";

const NotifyUser = ({ msg, type, timeout }) => {
  const [isVisible, setIsVisible] = useState(true);
  
  useEffect(() => {
    // 每次props更新时，重新显示提示
    setIsVisible(true);
    const timer = setTimeout(() => {
      setIsVisible(false);
    }, timeout);

    return () => {
      clearTimeout(timer);
    };
  }, [timeout, msg, type]); // 添加msg和type到依赖列表

  const notificationStyle = {
    backgroundColor: notification[type][0],
    color: notification[type][1],
  };

  return (
    <>
      {isVisible && (
        <div
          className="notification-box"
          role="alert"
          style={notificationStyle}
        >
          {msg}
        </div>
      )}
    </>
  );
};

const notification = {
  error: ["#ecc8c5", "#ab3331"],
  success: ["#d4edda", "#155724"],
  info: ["#cce5ff", "#004085"],
};

export default NotifyUser;

方案二：给NotifyUser添加唯一key，强制重新挂载 #

在RightUI组件中添加一个提交计数器，每次提交表单时递增计数器，然后把计数器作为NotifyUser的key属性，这样每次提交都会强制重新挂载组件，重置内部状态：

const RightUI = () => {
  const [email, setEmail] = useState("");
  const [isValidEmail, setIsValidEmail] = useState(undefined);
  const [submitCount, setSubmitCount] = useState(0); // 新增提交计数器

  const handleFormSubmit = (e) => {
    e.preventDefault();
    
    const isValid =
      /^((([!#$%&'*+\-\/=?^_`{|}~\w])|([!#$%&'*+\-\/=?^_`{|}~\w][!#$%&'*+\-\/=?^_`{|}~\.\w]{0,}[!#$%&'*+\-\/=?^_`{|}~\w]))[@]\w+([-.]\w+)*\.\w+([-.]\w+)*)$/gm.test(
        email
      );

    setIsValidEmail(isValid);
    setSubmitCount(prev => prev + 1); // 每次提交递增计数器
  };

  useEffect(() => {
    console.log(isValidEmail)
    if (isValidEmail) {
      setTimeout(() => {
        window.location = "https://google.com";
      }, 2500);
    }
  }, [isValidEmail]);

  return (
    <div id="right__ui">
      <div className="right__ui-container">
        <h3>Sign up for exclusive access.</h3>
        <form onSubmit={handleFormSubmit}>
          <input
            type="text"
            placeholder="Your email address"
            id="email_input"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <button type="submit">Get Started</button>
        </form>
        {isValidEmail === undefined ? null : (
          <NotifyUser
            key={submitCount} // 添加唯一key
            msg={
              isValidEmail
                ? "Thanks for providing your details."
                : "Please provide a valid Email address!"
            }
            type={isValidEmail ? "success" : "error"}
            timeout={3000}
          />
        )}
      </div>
    </div>
  );
};

方案对比 #

• 方案一更符合React组件的封装原则，让组件自身处理状态重置，性能更优。
• 方案二简单直接，通过强制重新挂载组件解决问题，适合快速修复，但会带来额外的组件卸载/挂载开销。

内容的提问来源于stack exchange，提问作者Vivek K.