從表單響應更新狀態
我正在嘗試從表單中獲取值并將其存儲在狀態中。每次我遵循指南時,都會出現以下錯誤(更不用說指南都是類風格的反應):“渲染沒有返回任何內容。這通常意味著缺少返回語句?;蛘?,不渲染任何內容,返回 null。”組件呈現,我什至可以將一個虛擬值傳遞給 step.generalInfo.name,它會顯示在組件上。但是,只要我按一個鍵進入輸入,繁榮錯誤。我認為錯誤出現在兩個地方之一 - 我的 handleChange() 或我試圖更新狀態的方式,因為我試圖在另一個對象內的對象中獲取值。我可能沒有正確解構或支撐鉆孔。請幫忙!謝謝!App() 呈現如下形式:function Form() { const [step, setStep] = useState({ stage: 1, generalInfo: { name: "", batchSize: "", batchType: "", batchNumber: "", ibu: "", srm: "", abv: "", origionalGravity: "", finalGravity: "", brewingDate: "", dateSecondary: "", dateBottling: "", }, ingredients: ["", "", ""], brewingNotes: "", hopsNotes: "", yeastNotes: "", fermentationNotes: "",...更多狀態和下一頁/上一頁功能... const handleChange = (e) => { console.log(e); console.log(e.target.name); console.log(e.target.value); setStep({ [e.target.name]: e.target.value }); console.log(step); }; const handleSubmit = (e) => { e.preventDefault(); }; switch (step.stage) { case 1: return ( <StepOne step={step} next={next} prev={prev} handleChange={handleChange} setStep={setStep} /> ); }}export default Form;StepOne 組件如下:function StepOne({ step, next, prev, handleChange, setStep }) { const { name, batchSize, batchType, batchNumber, ibu, srm, abv, origionalGravity, finalGravity, brewingDate, dateSecondary, dateBottling, } = step.generalInfo; return ( <div className="form-container"> <h1>General Info</h1> <form> <div className="label-group"> <label>Name:</label> <input type="text" name="name" onChange={handleChange} /> </div> <button onClick={next}>Next</button> </form> </div> );}export default StepOne;
查看完整描述