React 取不到state中的值

Question

此问题由 state 的"不保证同步"导致.
一般有两种方法实现同步,
1.在setState的回调函数中,
2.使用setTimeout.

整个流程:在父组件,点击提交按钮时,通过父组件调用子组件的方法,将子组件的值,传回父组件,一起提交.

问:在"父组件提交函数"中,如何取到 this.state.modelStruct 的值?

1.父组件中被子组件调用的函数:

  saveGgeditorData = value => { //子组件回传,保存结构数据
    setTimeout(()=>{
      this.setState({modelStruct: value},()=>{console.log(this.state.modelStruct)})//有值
    },0)
    console.log('我保存了子组件的数据');
    console.log(this.state.modelStruct) //无值
  };

2.父组件提交函数:

  handleSubmit = e => {
    e.preventDefault();
    this.refs.GgeditorData.handleClick() //调用子组件方法
    const okData = {
    modelStruct: this.state.modelStruct, //取不到值(要解决的问题)
    ... ...
    }

3.子组件方法:

  handleClick = () => {
    const { propsAPI } = this.props;
    const GgeditorData = propsAPI.save()
    this.props.onAddGgeditorData(GgeditorData);
  };

=========================================

还有一个方法,如果将子组件"拿数据"的功能,直接移植到父组件,应该也行吧,只是如何移植呢?
子组件如下:(GG-Editor)

import React from "react";
import { Button } from "antd";
import { withPropsAPI } from "gg-editor";

class Save extends React.Component {
  handleClick = () => {
    const { propsAPI } = this.props;
    const GgeditorData = propsAPI.save()
    this.props.onAddGgeditorData(GgeditorData);
    // console.log(propsAPI.save());
  };

  render() {
    return (
      <div style={{ padding: 8 }}>
        <Button onClick={this.handleClick}>保存</Button>
      </div>
    );
  }
}

export default withPropsAPI(Save);

Answer 1

1. saveGgeditorData函数中是先执行两个console,后执行setTimeout中的setState,所以无值。
2. 父组件中调用子组件方法的时候，可以直接返回数据拿来用，如：

父组件：
handleSubmit = e => {
    e.preventDefault();
    const modelStruct = this.refs.GgeditorData.getSubmitData();
    
    // 想存到state的话
    this.setState({modelStruct});
    
    const okData = {
        modelStruct,
        //...other
    };
}
    
子组件：
getSubmitData = () => { 
    // ....拿到数据data
    return data;
}