警告-组件正在将受控输入更改为非受控输入

Question

我的代码：NameInput.js

import React from "react";
const NameInput = (props) => {
return (
<>
<input
type={"text"}
placeholder="N a m e"
id="name-input"
className="form-input"
onChange={(e)=>props.passState.setFormValue(e)}
value={props.passState.formValue.name}
/>
<div id="border-name" className="border-div" />
</>
);
};
export default NameInput;

ConfirmPassword.js

import React from "react";
// import { onFormChange } from "../utils/utilFunction";
const ConfirmPassword = (props) => {
return (
<>
<input
type={"password"}
placeholder="C o n f i r m P a s s w o r d"
id="confirm-password-input"
className="form-input"
onChange={(e)=>props.passState.setFormValue(e)}
value={props.passState.formValue.cnfmPswd}
/>
<div id="border-confirm-password" className="border-div" />
</>
);
};
export default ConfirmPassword;

控制台中的警告

react-dom.development.js:86 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
at input
at NameInput (http://localhost:3000/static/js/bundle.js:826:20)
at div
at form
at Form (http://localhost:3000/static/js/bundle.js:249:5)
at div
at div
at div
at Mainbox (http://localhost:3000/static/js/bundle.js:122:5)
at App (http://localhost:3000/static/js/bundle.js:35:76)

主代码Form.js

import LoginAccount from "./renderIfSignup/LoginAccount";
import CreateAccount from "./renderIfLogin/CreateAccount";
const Form = ({ sendprop }) => {
const [formValue, setFormValue] = useState({
name: "",
email: "",
pswd: "",
cnfmPswd: "",
});
function onFormChange(e) {
console.log("target : "+e.target.value);
setFormValue({ ...formValue, [e.target.name]: e.target.value });
console.log(formValue);
}
return (
<>
<form>
<div id="input-div">
{sendprop === "signup" ? <NameInput passState={{formValue,setFormValue}}/> : " "}
<input
type={"email"}
placeholder="E m a i l  A d d r e s s"
id="email-input"
className="form-input"
name="email"
onChange={onFormChange}
value={formValue.email}
/>
<div id="border" className="border-div" />
<input
type={"password"}
placeholder="P a s s w o r d"
id="password-input"
className="form-input"
onChange={onFormChange}
value={formValue.pswd}
/>
<div id="border" className="border-div" />
{sendprop === "signup" ? <ConfirmPassword passState={{formValue,setFormValue}}/> : " "}
</div>
<div id="submit-btn-div">
<button type={"submit"} id="submit-btn">
S U B M I T
</button>
</div>
{sendprop === "signup" ? <LoginAccount /> : " "}
{sendprop !== "signup" ? <CreateAccount /> : " "}
</form>
</>
);
};
export default Form;

我在NameInput.js和ConfirmPassword.js这两个组件中收到了警告，但在Form.js的输入栏中没有什么是受控输入和非受控输入？我做错了什么？有人能解释为什么我面临这个错误吗

Answer 1

您的代码有很多错误！

1. setState没有以前的值
2. 使用e.target.name，但输入标记中没有name属性
3. 将错误的处理程序函数传递给您的子组件(在您的情况下，我认为您希望传递onFormChange，而不是状态设置器setFormValue(

// NameInput.js
const NameInput = (props) => {
return (
<>
<input
type={"text"}
placeholder="N a m e"
id="name-input"
className="form-input"
name="name"  // Missing name attribute here
onChange={(e) => props.passState.onFormChange(e)}
value={props.passState.formValue.name}
/>
<div id="border-name" className="border-div" />
</>
);
};

// ConfirmPassword.js
const ConfirmPassword = (props) => {
return (
<>
<input
type={"password"}
placeholder="C o n f i r m P a s s w o r d"
id="confirm-password-input"
className="form-input"
name="cnfmPswd"  // Missing name attribute here
onChange={(e) => props.passState.onFormChange(e)}
value={props.passState.formValue.cnfmPswd}
/>
<div id="border-confirm-password" className="border-div" />
</>
);
};

// Form.js
const Form = ({ sendprop }) => {
const [formValue, setFormValue] = useState({
name: "",
email: "",
pswd: "",
cnfmPswd: ""
});
function onFormChange(e) {
console.log("target : " + e.target.value);
setFormValue((prev) => ({ ...prev, [e.target.name]: e.target.value })); // setState with previous value
console.log(formValue);
}
return (
<>
<form>
<div id="input-div">
{sendprop === "signup" ? (
<NameInput passState={{ formValue, onFormChange }} /> // Pass wrong handler function
) : (
" "
)}
<input
type={"email"}
placeholder="E m a i l  A d d r e s s"
id="email-input"
className="form-input"
name="email"
onChange={onFormChange}
value={formValue.email}
/>
<div id="border" className="border-div" />
<input
type={"password"}
placeholder="P a s s w o r d"
id="password-input"
className="form-input"
onChange={onFormChange}
value={formValue.pswd}
name="pswd" // Missing name attribute here
/>
<div id="border" className="border-div" />
{sendprop === "signup" ? (
<ConfirmPassword passState={{ formValue, onFormChange }} /> // Pass wrong handler function
) : (
" "
)}
</div>
<div id="submit-btn-div">
<button type={"submit"} id="submit-btn">
S U B M I T
</button>
</div>
{sendprop === "signup" ? <LoginAccount /> : " "}
{sendprop !== "signup" ? <CreateAccount /> : " "}
</form>
</>
);
};