警告：组件正在将未定义类型的受控输入更改为不受控答案

【问题标题】：Warning: A component is changing a controlled input of type undefined to be uncontrolled警告：组件正在将未定义类型的受控输入更改为不受控
【发布时间】：2020-10-29 14:09:42
【问题描述】：

尽管设置了初始状态，但在使用受控组件时收到以下警告：警告：组件正在将未定义类型的受控输入更改为不受控。输入元素不应从受控切换到不受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。

这是我的代码：

import React, { useState } from "react";

function App() {
    const [fullName, setFullName] = useState({
        fName: "",
        lName: ""
    });

    function handleChange(event) {
        const { value, name } = event.target;

        setFullName(prevValue => {
            if (name === "fName") {
                return {
                    fName: value,
                    lName: prevValue.lName
                };
            } else if (name === "lName") {
                return {
                    fName: prevValue.fName,
                    lname: value
                };
            }
        });
    }

    return (
        <div className="container">
            <h1>
                Hello {fullName.fName} {fullName.lName}
            </h1>
            <form>
                <input
                    name="fName"
                    onChange={handleChange}
                    placeholder="First Name"
                    value={fullName.fName}
                />
                <input
                    name="lName"
                    onChange={handleChange}
                    placeholder="Last Name"
                    value={fullName.lName}
                />
                <button>Submit</button>
            </form>
        </div>
    );
}

export default App;

如果我在输入中输入 John 作为 fName 并输入 Doe 作为 lName，标题应该是 Hello John Doe，但我刚刚收到 Hello John 警告。使用下面的条件将消除警告，但我只是再次得到 Hello John：

value={fullName.lName || ""}

如何让 fName 和 lName 同时显示而不发出警告？

【问题讨论】：

标签： reactjs react-hooks onchange use-state controlled-component

【解决方案1】：

这是因为一个错字而发生的。改变：

else if (name === "lName") {
   return {
      fName: prevValue.fName,
      lname: value
   };
}

到：

else if (name === "lName") {
   return {
      fName: prevValue.fName,
      lName: value // notice 'n' was in lowercase.
   };
}

另外，一个更简洁的方法（在我看来）是：

setFullName((prevValue) => ({
    ...prevValue, [name] : value
}));

工作示例：here

【讨论】：