-1

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

该组件位于其父组件的一部分上，我不希望如果用户更改部分（通过错误或仅查看）它的表单数据将被存储，因此当他回来时，他不需要再写一遍。

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

而且我考虑在父级中创建一个变量，当呈现表单的子级时，其状态将从该父级的变量中获取它的初始状态，并在组件即将卸载时将信息存储在那里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(
       ... 
    )
}

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

4

2 回答 2

1

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

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

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

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

于 2020-06-28T07:16:05.480 回答
1

你可以这样做： -

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" />
       ...
    )
}
于 2020-06-28T07:28:04.887 回答