Question

我收到错误消息“组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制的状态切换到受控制的状态（反之亦然）”，但是我看不到输入的方式一开始就不受控制

import React, {useState, useEffect} from 'react'

const Inp = ({n, val, ud}) => {
    return <input type="text" value={val} name={n} onChange={ud} />
}

export function Proof(props) {

let groupId = props.match.params.groupId
const [val, setVal] = useState({})


if (val.length === 0) {
    return 'loading'
}

let ud = (event) => {
    setVal({
        ...val,
        [event.target.name]:event.target.value
    })
}  

return <div>
    <h2>Head</h2>

    <Inp n={'name'} id={0} val={val['name']} ud={ud} />
    <Inp n={'email'} id={1} val={val['email']}  ud={ud} />
    <p key={'un0'}>{val['email']}</p>
    <p key={'un1'}>{val['name']}</p>
</div>
}

Answer 1

这是因为您的初始状态只是一个空对象。这意味着val['name']和val['email']最初是undefined。

警告基本上是在说：“我的值以前没有定义，但现在是。所以我正在从不受控制的状态切换为受控制的状态。”

改为更改默认状态，以将所需的键包含为默认的空字符串。这将删除警告

const [val, setVal] = useState({name: '', email: ''})

反应受控输入

1 个答案: