亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

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

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

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

2 回答

?
三國紛爭

TA貢獻1804條經驗 獲得超7個贊

您需要將數據對象存儲在狀態中。


export default class feedClase extends Component {

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

    render(

      <>

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

       <Feed/>

      </>

     )

}

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


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


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

TA貢獻1943條經驗 獲得超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" />

       ...

    )

}


查看完整回答
反對 回復 2022-10-21
  • 2 回答
  • 0 關注
  • 543 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號