为什么我不能在表单输入(子组件)和React useState Hook(父组件)之间共享信息

Question

我正在用React做一个多步骤表单，我希望当用户点击"下一步"按钮时，他/她可以转到下一个表单，将信息保存在父组件useState Hook中，并在用户决定返回时将其保留在输入中。Switch有8个案例，但为了简单起见，我只留下了1个。结构看起来像这样(代码后的问题(：

<MainForm /> |_ <UserInfo /> |_ Another 7 childs

MainForm.js

import React, { useState } from "react";
import UserInfo from "../components/Shared/UserInfo";
//import ... more childs ...
import {
BackButton,
NextButton,
SendButton,
} from "../components/Shared/Buttons";
const BDMForm = (props) => {
const [step, setStep] = useState(1);
const [datos, setDatos] = useState({
fullName: "",
email: "",
phoneNumber: "",
linkedIn: "",
city: "",
experience: "",
});
const handleChange = (e) => {
setDatos({ ...datos, [e.target.name]: e.target.value });
};
function renderComponent(step) {
let currentStep = step;
switch (currentStep) {
case 1:
return <UserInfo handleChange={handleChange} datos={datos.fullName} />;
// 7 more cases
}
return (
<form>
{renderComponent(step)}
<div className="button-container">
<BackButton step={step} setStep={setStep} />
{step >= 7 ? null : <NextButton step={step} setStep={setStep} />}
{step === 7 ? <SendButton /> : null}
</div>
</form>
);
};
export default MainForm;

UserInfo.js

import React from "react";
return (
<div className="card-container">
<label>
Nombre y Apellido<span> *</span>
</label>
<input
type="text"
name="fullName"
value={props.datos}
onChange={props.handleChange}
/>
</div>
</div>
);
};
export default UserInfo;

我有两个问题：

1( 当我在fullName输入(UserInfo.js(上写东西时，我认为React正在用默认值("(更新组件，所以我不能在上面写任何东西。预期行为：用户可以写入，并且输入应保存在父组件上的datas.fullName中。当用户按下"下一步"或"返回"时，书面信息仍将存在。

2( 我的方法可以吗？我应该将所有子级数据保存在父组件中，然后稍后从另一个子级访问它吗(比如Confirm.js或用户可以在发送信息之前读取信息的地方(。我试着学习Context API，但仍然不知道如何实现它😅

Answer 1

像这样更改handleChange函数：

const handleChange = (e) => {
const fieldName = e.target.name;
const fieldValue = e.target.value;
setDatos(prevDatos => ({ ...prevDatos, [fieldName]: fieldValue }));
};

当新状态依赖于以前的状态时，您必须使用函数方式来更新状态。

关于你的第二个问题，是的，你的方法很好。

最后，我将在定义函数时保持一定的一致性。我指的是handleChange和renderComponent函数。