时间戳

首页 > 解决方案 > 警告：组件正在将受控输入更改为不受控

reactjs - 警告：组件正在将受控输入更改为不受控

问题描述

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

标签： reactjs

解决方案

问题就在这里，当name === 'eMail'您返回以下状态时，该状态没有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] 的值

参考

对对象使用扩展运算符

推荐阅读