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

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

React Hooks:無(wú)法在 useEffect() return 中更改父級(jí)的任何內(nèi)容

React Hooks:無(wú)法在 useEffect() return 中更改父級(jí)的任何內(nèi)容

我有一個(gè)帶有表單的子組件,用戶(hù)可以在其中放置標(biāo)題、描述和圖像。該組件位于其父組件的一部分上,我不希望如果用戶(hù)更改部分(通過(guò)錯(cuò)誤或僅查看)它的表單數(shù)據(jù)將被存儲(chǔ),因此當(dāng)他回來(lái)時(shí),他不需要再寫(xiě)一遍。我想過(guò)將所有內(nèi)容直接存儲(chǔ)在父級(jí)的狀態(tài)中,但是每次用戶(hù)按下一個(gè)鍵時(shí),它都會(huì)重新渲染整個(gè)視圖。而且我考慮在父級(jí)中創(chuàng)建一個(gè)變量,當(dāng)呈現(xiàn)表單的子級(jí)時(shí),其狀態(tài)將從該父級(jí)的變量中獲取它的初始狀態(tài),并在組件即將卸載時(shí)將信息存儲(chǔ)在那里useEffect(()=>{return ()=>{ props.formData = formData } },[])export default class feedClase extends Component {    data = {tittle:"", description: "", Blobs: [] }    render(      <>       <FormChild data={data}/>       <Feed/>      </>     )}FormChild({data}){   const [tittle, setTittle] = useState(data.tittle)   const [description, setDescription] = useState(data.description)   const [images, setImages] = useState(data.Blobs)   useEffect(() => {      return () => {         data = {Blobs: images, tittle, description}         //I also tried storing it in the parent's state         //-> props.setData({Blobs: images, tittle, description}) //setData={d=>this.setState({data: d})}      }   }, [])      return(       ...     )}但它不會(huì)改變父變量/狀態(tài)中的任何內(nèi)容。我怎樣才能讓它工作?
查看完整描述

2 回答

?
三國(guó)紛爭(zhēng)

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超7個(gè)贊

您需要將數(shù)據(jù)對(duì)象存儲(chǔ)在狀態(tài)中。


export default class feedClase extends Component {

    state = { data = {tittle:"", description: "", Blobs: [] } }

    render(

      <>

       <FormChild data={this.state.data}/>

       <Feed/>

      </>

     )

}

但是,我注意到您的代碼中有幾件事我會(huì)更改。您的父組件中有狀態(tài)作為道具傳遞下來(lái)。然后在子組件中,您將狀態(tài)片段保存在狀態(tài)中。你應(yīng)該避免保持這樣的兩個(gè)版本的狀態(tài)。


此外,您似乎正在嘗試在 useEffect 掛鉤中更新您的狀態(tài)。我建議在與 state 相同的組件中編寫(xiě)處理程序方法,并在需要時(shí)將它們作為 props 傳遞。


查看完整回答
反對(duì) 回復(fù) 2022-10-21
?
楊__羊羊

TA貢獻(xiàn)1943條經(jīng)驗(yàn) 獲得超7個(gè)贊

你可以這樣做: -


export default class feedClase extends Component {

data = {tittle:"", description: "", Blobs: [] }

const handleSetData = (obj) => {

    data[obj.key] = obj.value;

}

render(

  <>

   <FormChild data={data} onChange={obj => handleSetData(obj)} />

   <Feed/>

  </>

 )

}


FormChild(props){

   const [tittle, setTittle] = useState(props.data.tittle)

   const [description, setDescription] = useState(props.data.description)

   const [images, setImages] = useState(props.data.Blobs)

   const handleChange = (e) => {

       setTittle(e.target.value);

       props.onChange({key: "tittle", value: e.target.value});

   }

   return(

       <input onChange={e => handleChange(e)} placeholder="tittle" />

       ...

    )

}


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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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