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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

哆啦的時光機 2022-10-21 11:11:16
我有一個帶有表單的子組件,用戶可以在其中放置標題、描述和圖像。該組件位于其父組件的一部分上,我不希望如果用戶更改部分(通過錯誤或僅查看)它的表單數(shù)據(jù)將被存儲,因此當他回來時,他不需要再寫一遍。我想過將所有內(nèi)容直接存儲在父級的狀態(tài)中,但是每次用戶按下一個鍵時,它都會重新渲染整個視圖。而且我考慮在父級中創(chuàng)建一個變量,當呈現(xiàn)表單的子級時,其狀態(tài)將從該父級的變量中獲取它的初始狀態(tài),并在組件即將卸載時將信息存儲在那里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(       ...     )}但它不會改變父變量/狀態(tài)中的任何內(nèi)容。我怎樣才能讓它工作?
查看完整描述

2 回答

?
三國紛爭

TA貢獻1804條經(jīng)驗 獲得超7個贊

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


export default class feedClase extends Component {

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

    render(

      <>

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

       <Feed/>

      </>

     )

}

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


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


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

TA貢獻1943條經(jīng)驗 獲得超7個贊

你可以這樣做: -


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" />

       ...

    )

}


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

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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