React组件未使用state却因state更新持续重渲染问题求助

核心问题原因 #

1. 内部组件重复触发重渲染：CardContent 是定义在 Login 组件内部的函数组件，每次 Login 因 setEmail 更新状态触发重渲染时，CardContent 都会被重新创建。作为 props 传给 Card 后，会导致 Card 及其子组件（包括 TextInput）频繁重新渲染，输入框失去焦点或重置内容，因此输入第一个字符后无法继续输入。
2. 双重状态管理冲突：TextInput 自身维护了 inputValue 状态，同时父组件 Login 又通过 onChange 更新 email 状态，双重状态不同步进一步加剧了重渲染和输入异常问题。

具体修复步骤 #

1. 优化 CardContent 避免重复创建

将 CardContent 移到 Login 组件外部，或使用 useMemo 缓存组件实例，确保仅在依赖项变化时重新生成：

// 方案：将CardContent移至Login组件外部
const CardContent = ({ 
  handleEmailUpdate, 
  handlePasswordUpdate, 
  styles, 
  customStyles, 
  emailIcon, 
  lockIcon,
  email,
  password
}) => {
  return (
    <div className={styles.cardContent}>
      <div className={`${styles.inputForm} ${customStyles.inputForm}`}>
        <TextInput
          label="Email"
          type="email"
          icon={emailIcon}
          placeholder="email@gmail.com"
          style={{ borderRadius: "10px 10px 0 0 " }}
          onChange={handleEmailUpdate}
          value={email}
        />
        <TextInput
          label="Password"
          type="password"
          icon={lockIcon}
          placeholder="*********"
          style={{ borderRadius: "0 0 10px 10px" }}
          onChange={handlePasswordUpdate}
          value={password}
        />
      </div>
    </div>
  );
};

export default function Login() {
  const loading = false;
  const navigate = useNavigate();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  // ... 原有方法保持不变

  // 使用useMemo缓存CardContent实例
  const memoizedCardContent = useMemo(() => (
    <CardContent 
      handleEmailUpdate={handleEmailUpdate} 
      handlePasswordUpdate={handlePasswordUpdate}
      styles={styles}
      customStyles={customStyles}
      emailIcon={emailIcon}
      lockIcon={lockIcon}
      email={email}
      password={password}
    />
  ), [handleEmailUpdate, handlePasswordUpdate, styles, customStyles, emailIcon, lockIcon, email, password]);

  return (
    <div className="container">
      <Card
        title="Sign In"
        subtitle="Sign in to continue"
        content={memoizedCardContent}
        leftImage={welcomeImage}
      />
    </div>
  );
}

2. 将 TextInput 改为受控组件，统一状态管理

移除 TextInput 内部的 inputValue 状态，完全由父组件传递的 value 和 onChange 控制：

import React, { useState, useEffect } from "react";
import styles from "../styles/components/textInput.module.scss";

import validIcon from "../assets/images/validIcon.svg";

export default function TextInput({
  label,
  type,
  icon,
  style,
  onChange,
  value,
  placeholder,
  disabled,
  validation,
  showValidIcon,
}) {
  const [focused, setFocused] = useState(false);
  const [valid, setValid] = useState(false);

  // 监听value变化自动更新验证状态
  useEffect(() => {
    if (validation && value) {
      setValid(validation.test(value));
    }
  }, [validation, value]);

  const handleChange = (e) => {
    onChange(e.target.value);
  };

  return (
    <div
      className={`${styles.inputWrapper} ${
        focused ? styles.focusedWrapper : ""
      }`}
      style={style}
    >
      {icon && (
        <div className={styles.iconContainer}>
          <img src={icon} alt="icon" />
        </div>
      )}
      <div className={styles.inputContainer}>
        <span className={styles.inputLabel}>{label}</span>
        <input
          type={type}
          className={styles.textInput}
          disabled={disabled}
          onChange={handleChange}
          value={value} // 使用父组件传递的value，替代defaultValue
          placeholder={placeholder}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
        />
        {showValidIcon && valid && (
          <img src={validIcon} className={styles.validIcon} />
        )}
      </div>
    </div>
  );
}

修复后效果 #

• 输入框不再频繁重渲染，可正常连续输入内容；
• 状态由父组件统一管理，避免了双重状态导致的不一致问题；
• 组件渲染性能优化，减少了不必要的重渲染开销。

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