Предупреждение: компонент изменяет управляемый ввод типа undefined на неконтролируемый

Я получил следующее предупреждение при использовании управляемых компонентов, несмотря на то, что установил начальные состояния: Предупреждение: компонент изменяет управляемый ввод типа undefined на неконтролируемый. Элементы ввода не должны переключаться с управляемого на неуправляемый (или наоборот). Выберите между использованием контролируемого или неконтролируемого элемента ввода на протяжении всего срока службы компонента.

Вот мой код:

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:

value={fullName.lName || ""}

Как добиться одновременного отображения fName и lName без предупреждения?


person Bayu    schedule 29.10.2020    source источник


Ответы (1)


Это происходит из-за опечатки. Изменять :

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

to:

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

Кроме того, более лаконичный способ сделать это (на мой взгляд):

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

Рабочий пример: здесь

person Parama Kar    schedule 29.10.2020