3 回答

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊
修復(fù) handleChange 是關(guān)鍵!
const handleChange = (e) => {
e.persist();
console.log(e);
console.log(e.target.name);
console.log(e.target.value);
setStep((state) => ({
...state,
generalInfo: { ...state.generalInfo, [e.target.name]: e.target.value },
}));
console.log(step);
};

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超6個(gè)贊
您的功能handleChange不正確,它刪除了step除當(dāng)前更改的字段之外的所有狀態(tài)字段。如果它使用來(lái)自狀態(tài)的數(shù)據(jù),這可能會(huì)導(dǎo)致另一個(gè)組件崩潰step
它應(yīng)該是
const handleChange = (e) => {
console.log(e);
console.log(e.target.name);
console.log(e.target.value);
setStep({ ...step, [e.target.name]: e.target.value }); <= HERE
console.log(step);
};

TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超3個(gè)贊
我相信它在您的 handleChange 方法中的 setStep
setStep({ [e.target.name]: e.target.value });
useState 不會(huì)以與 this.setState 相同的方式合并,因此階段被覆蓋并且您的 switch 語(yǔ)句不會(huì)返回渲染。
相反,您需要傳遞一個(gè)函數(shù)來(lái)迭代狀態(tài)
setStep((state) => ({...state, generalInfo: {...state.generalInfo, [e.target.name]: e.target.value}}))
但是考慮到嵌套的數(shù)量,e.target.name 的位置很難找到;你會(huì)從使用 useReducer 而不是 useState 中受益匪淺。
添加回答
舉報(bào)