第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

從表單響應(yīng)更新?tīng)顟B(tài)

從表單響應(yīng)更新?tīng)顟B(tài)

狐的傳說(shuō) 2022-11-11 14:21:55
我正在嘗試從表單中獲取值并將其存儲(chǔ)在狀態(tài)中。每次我遵循指南時(shí),都會(huì)出現(xiàn)以下錯(cuò)誤(更不用說(shuō)指南都是類(lèi)風(fēng)格的反應(yīng)):“渲染沒(méi)有返回任何內(nèi)容。這通常意味著缺少返回語(yǔ)句?;蛘?,不渲染任何內(nèi)容,返回 null?!苯M件呈現(xiàn),我什至可以將一個(gè)虛擬值傳遞給 step.generalInfo.name,它會(huì)顯示在組件上。但是,只要我按一個(gè)鍵進(jìn)入輸入,繁榮錯(cuò)誤。我認(rèn)為錯(cuò)誤出現(xiàn)在兩個(gè)地方之一 - 我的 handleChange() 或我試圖更新?tīng)顟B(tài)的方式,因?yàn)槲以噲D在另一個(gè)對(duì)象內(nèi)的對(duì)象中獲取值。我可能沒(méi)有正確解構(gòu)或支撐鉆孔。請(qǐng)幫忙!謝謝!App() 呈現(xiàn)如下形式: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: "",...更多狀態(tài)和下一頁(yè)/上一頁(yè)功能...  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;
查看完整描述

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);

  };


查看完整回答
反對(duì) 回復(fù) 2022-11-11
?
哈士奇WWW

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);

};


查看完整回答
反對(duì) 回復(fù) 2022-11-11
?
一只名叫tom的貓

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 中受益匪淺。


查看完整回答
反對(duì) 回復(fù) 2022-11-11
  • 3 回答
  • 0 關(guān)注
  • 106 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)