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 {&nbsp; &nbsp; state = { data = {tittle:"", description: "", Blobs: [] } }&nbsp; &nbsp; render(&nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp;<FormChild data={this.state.data}/>&nbsp; &nbsp; &nbsp; &nbsp;<Feed/>&nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp; &nbsp;)}但是，我注意到您的代码中有几件事我会更改。您的父组件中有状态作为道具传递下来。然后在子组件中，您将状态片段保存在状态中。你应该避免保持这样的两个版本的状态。此外，您似乎正在尝试在 useEffect 挂钩中更新您的状态。我建议在与 state 相同的组件中编写处理程序方法，并在需要时将它们作为 props 传递。

Answer 2

你可以这样做： -export default class feedClase extends Component {data = {tittle:"", description: "", Blobs: [] }const handleSetData = (obj) => {&nbsp; &nbsp; data[obj.key] = obj.value;}render(&nbsp; <>&nbsp; &nbsp;<FormChild data={data} onChange={obj => handleSetData(obj)} />&nbsp; &nbsp;<Feed/>&nbsp; </>&nbsp;)}FormChild(props){&nbsp; &nbsp;const [tittle, setTittle] = useState(props.data.tittle)&nbsp; &nbsp;const [description, setDescription] = useState(props.data.description)&nbsp; &nbsp;const [images, setImages] = useState(props.data.Blobs)&nbsp; &nbsp;const handleChange = (e) => {&nbsp; &nbsp; &nbsp; &nbsp;setTittle(e.target.value);&nbsp; &nbsp; &nbsp; &nbsp;props.onChange({key: "tittle", value: e.target.value});&nbsp; &nbsp;}&nbsp; &nbsp;return(&nbsp; &nbsp; &nbsp; &nbsp;<input onChange={e => handleChange(e)} placeholder="tittle" />&nbsp; &nbsp; &nbsp; &nbsp;...&nbsp; &nbsp; )}