警告：組件正在將受控輸入更改為不受控

Question

import React, { useState } from 'react'

const App = () => {

    const [fullname, updatfullNa] = useState({
        fName:'',
        lName:'',
        eMail:'',
        pHone:''
    })

    const Inputevent = (event) => {
        // const value = event.target.value
        // const name = event.target.name
        const{value, name}=event.target

        updatfullNa((preValue) => {
            if (name === 'fName') {
                return { 
                    fName: value,
                    lName: preValue.lName,
                    eMail:preValue.eMail,
                    pHone:preValue.pHone

                }
            }
            else if (name === 'lName') {
                return { 
                    fName: preValue.fName,
                    lName: value,
                    eMail:preValue.eMail,
                    pHone :preValue.pHone
                }
            } else if (name === 'eMail') {
                return { 
                    fName: preValue.fName,
                    lName: preValue.lName,
                    eMail:value

                }
            } 
            else if (name === 'pHone') {
                return { 
                    fName: preValue.fName,
                    lName: preValue.lName,
                    eMail:preValue.eMail,
                    pHone:value
                }
            } 
        })

    }

    const onSubmit = (event) => {
        event.preventDefault()
    
    }

    return (<>
        <form onSubmit={onSubmit} >
            <div className="form">
                <h1>Hello {fullname.fName} {fullname.lName} <br/>
                <span className="EP"> {fullname.eMail} <br/>{fullname.pHone} </span> </h1>
                <input type="text" placeholder="Enter Your Name"
                    name="fName"
                    onChange={Inputevent}  value={fullname.fName}/>
              
                <input type="text" placeholder="Enter Your Last Name" name="lName" onChange={Inputevent}  value={fullname.lName}/>

                <input type="email" placeholder="Enter Your Email" name="eMail" onChange={Inputevent}  value={fullname.eMail}/>

                <input type="number" placeholder="Enter Your Phone Number" name="pHone" onChange={Inputevent}  value={fullname.pHone}/>
        
                <button type="submit" >Submit me 👍</button>
            </div>
        </form>

    </>
    )
}
export default App

警告：組件正在將受控輸入更改為不受控。 這可能是由於值從定義變為未定義引起的，這不應該發生。 決定在組件的生命周期內使用受控輸入元素還是不受控輸入元素。 更多信息： https://reactjs.org/link/controlled-components輸入 div 表單 App@http://localhost:3000/static/js/main.chunk.js:52:89

Answer 1

問題就在這里，當name === 'eMail'您返回下面的 state 時，它沒有pHone的值。

 return { 
                fName: preValue.fName,
                lName: preValue.lName,
                eMail:value

            }

還可以考慮重構您的代碼，如下所示

const Inputevent = (event) => {
  // const value = event.target.value
  // const name = event.target.name
  const{value, name}=event.target

  updatfullNa((prevState) => ({...prevState, [name]: value }))
}

prevState 之前的...表示將所有 prevState 復制到新的 Object 並僅更新鍵 [name] 的值

參考

對對象使用擴展運算符