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

【问题标题】：React Hooks: Can't change anything from parent in useEffect() returnReact Hooks：无法在 useEffect() return 中更改父级的任何内容
【发布时间】：2020-06-28 07:07:15
【问题描述】：

我有一个子组件，它有一个表单，用户可以在其中放置标题、描述和图像。

这个组件在它的父组件的一个部分上，我不希望如果用户更改部分（通过错误或只是查看）它的表单数据被存储，所以当他回来时他不需要写又来了。

我想过将所有内容直接存储在父级的状态中，但每次用户按下一个键时，它都会重新渲染整个视图。

我考虑在父级中创建一个变量，当带有表单的子级被渲染时，它的状态将从该父级的变量中获取它的初始状态，并在组件即将卸载时将信息存储在那里@ 987654321@

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(
       ... 
    )
}

但它不会改变父变量/状态中的任何内容。我怎样才能让它工作？

【问题讨论】：

你从哪里得到props？
来自FormChild参数@SonNguyen中的对象解构

标签： javascript reactjs react-hooks use-effect react-component-unmount

【解决方案1】：

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

export default class feedClase extends Component {
    state = { data = {tittle:"", description: "", Blobs: [] } }
    render(
      <>
       <FormChild data={this.state.data}/>
       <Feed/>
      </>
     )
}

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

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

【讨论】：

【解决方案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" />
       ...
    )
}

【讨论】：