Я получил следующее предупреждение при использовании управляемых компонентов, несмотря на то, что установил начальные состояния: Предупреждение: компонент изменяет управляемый ввод типа 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 без предупреждения?