小编Kam*_*icz的帖子

我已经通过一个简单的教程开始讲解React-hooks，但令我惊讶的是我遇到了一个我无法弄清楚的错误：

警告：组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换为受控制（反之亦然）。确定在组件的使用寿命期间使用受控或不受控制的输入元素。

发生此错误后，我的组件消失了，但我仍然可以输入将在控制台中正确打印出的数据。

我尝试设置输入的初始状态并更改

setInputs(inputs => ({
  ...inputs, [event.target.name]: event.target.value
}));

至

setInputs({...inputs, [event.target.name]: event.target.value});

但我仍然出错。

JSX

import React from 'react';
import './styles/form.scss';
import useSignUpForm from './hooks/customHooks.jsx';

const Form = () => {

    const {inputs, handleInputChange, handleSubmit} = useSignUpForm();

    return (
        <React.Fragment>
            <div className="formWrapper">
                <h1 className="header">Form</h1>
                <form onSubmit={handleSubmit}>
                    <div className="form-group">
                        <label htmlFor="nicknameInput">Nickname</label>
                        <input type="text" id="nicknameInput" name="nickname" onChange={handleInputChange}
                               value={inputs.nickname} required/>

                        <label htmlFor="emailInput">Email Address</label>
                        <input type="text" id="emailInput" name="email" onChange={handleInputChange}
                               value={inputs.email} required/>

                        <label htmlFor="lastName">Last Name</label>
                        <input type="text" id="lastName" name="lastName" onChange={handleInputChange}
                               value={inputs.lastName} …