当输入字段值未定义时，此问题的原因是引发react的警告。如果您为多个输入字段创建了一个changeHandler，并且希望使用changeHandler更改状态，则需要使用by spread运算符指定先前的值。就像我这里的代码一样。

constructor(props){
    super(props)
    this.state = {
        user:{
            email:'',
            password:''
        }
    }
}

// This handler work for every input field
changeHandler = event=>{
    // Dynamically Update State when change input value
    this.setState({
        user:{
            ...this.state.user,
            [event.target.name]:event.target.value
        }
    })
}

submitHandler = event=>{
    event.preventDefault()

    // Your Code Here...
}

render(){
    return (
        <div className="mt-5">
       
            <form onSubmit={this.submitHandler}>
                <input type="text" value={this.state.user.email} name="email" onChage={this.changeHandler} />
                
                <input type="password" value={this.state.user.password} name="password" onChage={this.changeHandler} />

                <button type="submit">Login</button>
            </form>
      

        </div>
    )
}

除了接受的答案之外，如果您使用的是类型为checkbox或radio的输入，我发现我还需要null/undefined检查选中的属性。

<input
  id={myId}
  name={myName}
  type="checkbox" // or "radio"
  value={myStateValue || ''}
  checked={someBoolean ? someBoolean : false}
  />

如果您使用的是TS（或Babel），则可以使用零合并而不是逻辑or运算符：

value={myStateValue ?? ''}
checked={someBoolean ?? false}

在我的情况下，这几乎是玛雅克·舒克拉的最高答案所说的。唯一的细节是我的州完全没有我所定义的财产。

例如，如果您的状态为：

state = {
    "a" : "A",
    "b" : "B",
}

如果您正在扩展代码，您可能需要添加一个新属性，因此，在代码的其他地方，您可能会创建一个新的属性c，其值不仅在组件的状态中未定义，而且属性本身也未定义。

要解决这个问题，只需确保将c添加到状态中，并给它一个适当的初始值。

例如。，

state = {
    "a" : "A",
    "b" : "B",
    "c" : "C", // added and initialized property!
}

希望我能解释我的边缘案例。

这样地

value={this.state.fields && this.state.fields["name"] || ''}

为我工作。

但我将初始状态设置为：

this.state = {
  fields: [],
}

const [name, setName] = useState()

在文本字段中键入后立即生成错误

const [name, setName] = useState('') // <-- by putting in quotes 

将修复此字符串示例上的问题。

对于功能部件：

const SignIn = () => {

  const [formData, setFormData] = useState({
    email: "",
    password: ""
  });

  
  const handleChange = (event) => {
    const { value, name } = event.target;
    setFormData({...formData, [name]: value });
  };


  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Signed in");
    setFormData({
      email: "",
      password: ""
    });
  };


  return (
    <div className="sign-in-container">
      <form onSubmit={handleSubmit}>
        <FormInput
          name="email"
          type="email"
          value={formData.email}
          handleChange={handleChange}
          label="email"
          required
        />
        <FormInput
          name="password"
          type="password"
          value={formData.password}
          handleChange={handleChange}
          label="password"
          required
        />
        <CustomButton type="submit">Sign in</CustomButton>
      </form>
    </div>
  );
};

export default SignIn;