React Hooks：无法在 useEffect() return 中更改父级的任何内容

Question

我有一个带有表单的子组件，用户可以在其中放置标题、描述和图像。该组件位于其父组件的一部分上，我不希望如果用户更改部分（通过错误或仅查看）它的表单数据将被存储，因此当他回来时，他不需要再写一遍。我想过将所有内容直接存储在父级的状态中，但是每次用户按下一个键时，它都会重新渲染整个视图。而且我考虑在父级中创建一个变量，当呈现表单的子级时，其状态将从该父级的变量中获取它的初始状态，并在组件即将卸载时将信息存储在那里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(       ...     )}但它不会改变父变量/状态中的任何内容。我怎样才能让它工作？

Answer 1

您需要将数据对象存储在状态中。

export default class feedClase extends Component {

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

    render(

      <>

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

       <Feed/>

      </>

     )

}

但是，我注意到您的代码中有几件事我会更改。您的父组件中有状态作为道具传递下来。然后在子组件中，您将状态片段保存在状态中。你应该避免保持这样的两个版本的状态。

此外，您似乎正在尝试在 useEffect 挂钩中更新您的状态。我建议在与 state 相同的组件中编写处理程序方法，并在需要时将它们作为 props 传递。

Answer 2

你可以这样做： -

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

       ...

    )

}