react 函数式组件改为class类组件

Question

改为class类组件原因:想将三个弹窗表单组件的数据保存在父组件表单的state里

当前进度:
１.父组件未改class组件.已经能拿到子组件的值.用的普通方法如下:
父组件:

  ...
  const createModelData = []
  const saveFormData = (value) => {
    createModelData.push(value)
  }
  ...
  return(
  ...
  <ConnectForm
    onAddConnectForm={saveFormData}
  />
  ...
  )

子组件(３个弹窗子组件分别调用):

  okHandle = () => {
    this.props.onAddConnectForm(this.state)
  };

新问题:
为什么下一个子组件提交的数据,会覆盖前一个组件的数据?
createModelData.push(value) 这样操作应该是将数据追加在数据组的后面啊

======================以下是原问=======================

export default () => {
  const [loading, setLoading] = useState<boolean>(true);
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  
useEffect(() => {
setTimeout(() => {
  setLoading(false);
}, 3000);
}, []);

... ...
return ()
}

就比如useState这些状态，写成普通的class类，应该是这样：

state = {
    loading: false,
    createModalVisible: false,
}
this.setLoading{
  loading: !loading,
}
this.createModalVisible{
  loading: !loading,
}

感觉不对呢
另外，父组件表单是函数式，子组件表单是class类。这种情况，没有办法将子组件表单的数据保存到父组件表单中吧

Answer 1

根据你的描述，我没猜错的话，你刚接触react不久。你需要明白以下知识点：

• react中的状态提升，怎么做的，意义是什么；状态提升, 其实最后发现，实现就是用了js中的特性，函数可以作为参数传递；
• hooks到底做了什么,useState和useEffect到底对应了类中的什么功能；