使用Hooks将React类转换为功能组件。 如何解决“不受控制的输入”错误

Question

I have the following code that I understand and it works perfectly.It is a class component. I am trying to write a working function component version with hooks. My refactor is giving me the infamous "uncontrolled input" error. I did not have the error until I used useEffect . I want to know how to fix the error. Thank you.

Old (Working) Class Component

class Dashboard extends Component{
    constructor(props){
      super(props)
      this.state = {
        clients: [],
        clientName:undefined
      }    

      this.clientsRef = firebase.database().ref('clients')

    }

    handleChange = (evt) => {
        this.setState({
            [evt.target.name]: evt.target.value
        });
        console.log(this.state.clientName);
    }

    addNewClient=(event,userID)=>{
        event.preventDefault()
        this.clientsRef.push({
          name: this.state.clientName,
          user_id:userID
        });

        this.setState({
              clientName:""
        })

    }


    componentDidMount() {
        this.clientsRef.on('child_added', snapshot => {
           const client = snapshot.val();
           client.key = snapshot.key;
           this.setState({ clients: [...this.state.clients, client]})
        });

        // this.state.clients.concat(client) 
     }

    /*_______________________________________________


    Add new company and associate it with a specific user ID

    _________________________________________________*/
    //


    render(){
      const {classes} = this.props;


      return(
        <Consumer>
        {(userData)=>{
           if(userData.state.user){
               console.log(userData.state.user);
           }

          return(






             <div className={classes.root}>
                  <Grid container spacing={24}>
                    <Grid item xs={12}>
                      <Paper>

                      </Paper>
                    </Grid>
                    <Grid item xs={12} sm={4}>


                    </Grid>
                    <Grid item xs={12} sm={4}>
                        <Paper className={classes.paper}>


                          <div>
                               <h1>Add new client or company</h1>
                               <form onSubmit = {(event)=>this.addNewClient(event,userData.state.userID)}>
                                 <input type="text" name="clientName" onChange = {this.handleChange} value ={this.state.clientName}/>
                                 <input type="submit" value="add client"/>
                               </form>

                                <ul> 

                                 {
                                   this.state.clients.map((val,index)=>{

                                      if(userData.state.userID === val.user_id){
                                        return <a key={index} href={`/dashboard/${userData.state.userID}/company/${val.name}/${val.key}`}> 
                                          <ListItem>{val.name}</ListItem>   
                                        </a>


                                      } 
                                   }) 
                                 }

                                 </ul>
                          </div>



                       </Paper>


                    </Grid>
                    <Grid item xs={12} sm={4}>


                    </Grid>

                  </Grid>

                  </div>


            )
          }
        }
       </Consumer>

      )
    }
}

Functional Component Version that Gives the Error.

function Dashboard(props){

    const initialState = {
        clients: [],
        clientName:""
      }    

    const [formState,setForm] = useState(initialState);
    const clientsRef = firebase.database().ref('clients');

    function handleChange(evt){
        setForm({...formState,
            [evt.target.name]: evt.target.value
        });

        console.log(formState)

    }


    function addNewClient(event,userID){
        event.preventDefault();
        clientsRef.push({
          name: formState.clientName,
          user_id:userID
        });


        setForm({
            clientName:""
        })

    }



    function fetchData() {
        clientsRef.on('child_added', snapshot => {
           const client = snapshot.val();
           console.log(client)
           client.key = snapshot.key;
           setForm({ clients: [...formState.clients, client]})
        });


     }


    useEffect(()=>{
        fetchData()
    },[])







    /*_________________*/




      const {classes} = props;
      const userData = useContext(Context);



          return(

             <div className={classes.root}>
                  <Grid container spacing={24}>
                    <Grid item xs={12}>
                      <Paper>

                      </Paper>
                    </Grid>
                    <Grid item xs={12} sm={4}>


                    </Grid>
                    <Grid item xs={12} sm={4}>
                        <Paper className={classes.paper}>


                          <div>
                               <h1>Add new client or company</h1>
                             <form onSubmit={(event)=>addNewClient(event,userData.state.userID)} >
                               <input type="text" name="clientName" onChange = {handleChange} value = {formState.clientName}/>
                               <input type="submit" value="add client"/>
                             </form>

                            <ul> 

                              {
                                 formState.clients.map((val,index)=>{

                                    if(userData.state.userID === val.user_id){
                                      return <a key={index} href={`/dashboard/${userData.state.userID}/company/${val.name}/${val.key}`}> <ListItem>{val.name}</ListItem></a>


                                    } 
                                 }) 
                              }

                            </ul>
                          </div>
                       </Paper>

                    </Grid>
                    <Grid item xs={12} sm={4}>

                    </Grid>
                  </Grid>
              </div>


            )



}

Answer 1

The updator, setForm , returned from useState works differently from this.setState .

While this.setState in Class Component automatically merges existing states , the hook's updator ( setForm ) doesn't automerge existing state .

... However, unlike this.setState in a class, updating a state variable always replaces it instead of merging it.

When you set clients in fetchData ,

function fetchData() {
  clientsRef.on("child_added", snapshot => {
    const client = snapshot.val();
    console.log(client);
    client.key = snapshot.key;

    // 👇 
    setForm({ clients: [...formState.clients, client] });
  });
}

setForm({ clients: [...formState.clients, client] }); turns clientName into undefined .

You'd need to spread existing state (as you do with reducer or Redux) to return a new reference containing clientName , which was set to the value for input below.

<input
  type="text"
  name="clientName"
  onChange={handleChange}
  value={formState.clientName}
/>;

When you fetch data, that input field gets uncontrolled because formState.clientName is undefined.

So return a new reference without clearing clientName .

setForm(previousForm => ({
  ...previousForm,
  clients: [...formState.clients, client]
}));