React中无法将输入元素转为可复用组件的问题排查

问题情况 #

把登录表单的输入字段重构为独立的可复用Input组件后，页面直接空白无法加载，控制台提示错误出在<LoginForm>组件中，建议添加错误边界处理。

相关代码 #

Input组件（input.jsx） #

import React from "react";

const Input = ({ name, label, value, onChange }) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input
        value={value}
        onChange={onChange}
        id={name}
        name={name}
        type="text"
        className="form-control"
      />
    </div>
  );
};

export default Input;

LoginForm核心代码（loginForm.jsx） #

handleChange = ({ currentTarget: input }) => {
  const account = { ...this.state.account };
  account[input.name] = input.value;
  this.setState({ account });
};

render() {
  const { account } = this.state;

  return (
    <div>
      <h1>Login</h1>
      <form onSubmit={this.handleSubmit}>
        <Input
          name="username"
          value={account.username}
          label="Username"
          onChange={this.handleChange}
        />
        <Input
          name="password"
          value={account.password}
          label="Password"
          onChange={this.handleChange}
        />

        <button className="btn btn-primary">Login</button>
      </form>
    </div>
  );
}

控制台报错信息 #

The above error occurred in the component:

at LoginForm (http://localhost:3000/main.5d4e82bfe117bc198b43.hot-update.js:27:5)
at Route (http://localhost:3000/static/js/bundle.js:54444:5)
at Switch (http://localhost:3000/static/js/bundle.js:54739:5)
at main
at App
at Router (http://localhost:3000/static/js/bundle.js:54612:5)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:53870:5)

问题原因 #

最直接的问题是LoginForm类组件未初始化state里的account对象，导致render时访问account.username和account.password会抛出Cannot read properties of undefined (reading 'username')的错误，直接让组件崩溃，页面就空白了。

另外还有个小问题：密码输入框现在是text类型，输入时会明文显示，不符合登录场景的安全需求。

修复方案 #

1. 初始化LoginForm的state #

在LoginForm组件里给account对象设置初始值，确保render时能正常访问username和password：

class LoginForm extends React.Component {
  // 用class字段初始化state
  state = {
    account: {
      username: '',
      password: ''
    }
  };

  // 或者用构造函数初始化
  // constructor(props) {
  //   super(props);
  //   this.state = {
  //     account: {
  //       username: '',
  //       password: ''
  //     }
  //   };
  // }

  handleChange = ({ currentTarget: input }) => {
    const account = { ...this.state.account };
    account[input.name] = input.value;
    this.setState({ account });
  };

  // ... 其他代码
}

2. 优化密码输入框类型 #

修改Input组件，让它支持接收type参数，默认值设为text，然后给密码输入框指定type为password：

首先更新Input组件：

const Input = ({ name, label, value, onChange, type = "text" }) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input
        value={value}
        onChange={onChange}
        id={name}
        name={name}
        type={type}
        className="form-control"
      />
    </div>
  );
};

然后在LoginForm里调用Input时添加type属性：

<Input
  name="password"
  value={account.password}
  label="Password"
  onChange={this.handleChange}
  type="password"
/>

3. 可选：添加错误边界 #

按照控制台提示，给LoginForm加个错误边界组件，这样就算以后组件出问题，也不会整个页面空白，而是显示友好提示：

先写错误边界组件：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error("组件出错:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h2>登录页面加载失败，请稍后再试。</h2>;
    }
    return this.props.children;
  }
}

然后用它包裹LoginForm：

<ErrorBoundary>
  <LoginForm />
</ErrorBoundary>

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