时间戳

首页 > 解决方案 > 反应控制输入

reactjs - 反应控制输入

问题描述

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

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>
}

标签： reactjs

解决方案

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

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

而是更改您的默认状态以包含您需要的键，并将空字符串作为默认值。这将删除警告

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

推荐阅读