Reactjs 如何确保道具在react js中访问之前已更新

下面给出的React js代码旨在在更改cid input的值时填充或更改输入的初始值（触发onBlur），但只有在触发onBlur两次后，才会填充或更改这些值。帮助我找出我犯错误的地方。代码如下所示：

import React, { Component } from 'react';
import { Form, Input, Button, Select } from 'antd';
import { connect } from 'react-redux';
import { addParticipant, updateParticipant, fetchParticpant } from './actions';

const { Option } = Select;
class CustomParticipantForm extends Component {
    state = {
        confirmDirty: false,
        participantID: null,
        requestType: 'post',
        form_data: {
            identity_no: null,
            name: null,
            email: null,
            gender: null,
        }
    };
    componentDidMount() {
        if (this.props.data !== null) {
            this.setState({
                ...this.state,
                form_data: {
                    ...this.state.form_data,
                    cid: this.props.data.cid,
                    name: this.props.data.name,
                    email: this.props.data.email,
                    gender: this.props.data.gender,
                }
            })
        }
    }

    handleSubmit = (event, postType, participantID) => {
        event.preventDefault();
        this.props.form.validateFieldsAndScroll(async (err, values) => {
            if (!err) {
                switch (postType) {
                    case 'post':
                        await this.props.addParticipant(values)
                        if (this.props.userError == null)
                            this.props.history.push('/create');
                        break;
                    case 'put':
                        await this.props.updateParticipant(values, participantID)
                        if (this.props.userError == null)
                            this.props.history.push(`/participant/${participantID}`);
                        break;
                    default:
                        console.log('default')
                }
            }
        });
    };

    handleConfirmBlur = e => {
        const { value } = e.target;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    };

    handleChange = () => {
        this.setState(
            {
                ...this.state,
                formChanged: true
            }
        )
    }
    getParticipantWithCID = (e) => {
        const { value } = e.target
        const { fetchParticpant } = this.props

        fetchParticpant(value) 

        if (this.props.stateParticipantData.length === 1) { //this line gets executed before the above line function call
            this.setState({
                ...this.state,
                form_data: {
                    ...this.state.form_data,
                    cid: this.props.stateParticipantData[0].cid,
                    name: this.props.stateParticipantData[0].name,
                    email: this.props.stateParticipantData[0].email,
                    gender: this.props.stateParticipantData[0].gender
                }
            })
        } else {
            this.setState({
                ...this.state,
                requestType: 'post',
                participantID: null,
                form_data: {
                    cid: value,
                    name: null,
                    email: null,
                    gender: null
                }
            })
        }
    }
    render() {
        const formItemLayout =
            this.props.formLayout === 'horizontal'
                ? {
                    labelCol: { span: 6 },
                    wrapperCol: { span: 14 },
                }
                : null;
        const { getFieldDecorator } = this.props.form;
        const prefixSelector = getFieldDecorator('prefix', {
            initialValue: '975',
        })(
            <Select style={{ width: 80 }}>
                <Option value="975">+975</Option>
            </Select>,
        );

        return (
            <Form
                layout={this.props.formLayout}
                autoComplete="off"
                onSubmit={event => this.handleSubmit(event,
                    this.state.requestType,
                    this.state.participantID
                )}
            >
                <Form.Item label="CID No." {...formItemLayout} extra="Please enter Alumni's CID ">
                    {getFieldDecorator('cid', {
                        initialValue: this.state.form_data.cid,
                        rules: [
                            {
                                required: true, message: "Alumni's CID is required!",
                                numeric: {
                                    message: "Please Provide valid CID No."
                                }
                            },
                        ],
                    })(
                        <Input type="text" onBlur={this.getParticipantWithCID} />,
                    )}
                </Form.Item>
                <Form.Item label="Name" {...formItemLayout} extra="Please enter user's full name">
                    {getFieldDecorator('name', {
                        initialValue: this.state.form_data.name,
                        rules: [
                            {
                                required: true,
                                message: "Participant's full name is required!"
                            },
                            {
                                type: 'string',
                                message: "Participant's full name must be string!"
                            },
                        ],
                    })(
                        <Input type="text" />,
                    )}
                </Form.Item>
                <Form.Item label="Gender" {...formItemLayout} extra="Please select Gender">
                    {getFieldDecorator('gender', {
                        initialValue: this.state.form_data.gender,
                        rules: [
                            {
                                required: true, message: "Gender is required!"
                            },
                        ],
                    })(
                        <Select placeholder="Select Gender" >
                            <Option value="Male">Male</Option>
                            <Option value="Female">Female</Option>
                        </Select>,
                    )}
                </Form.Item>
                <Form.Item label="Email" {...formItemLayout} extra="Please enter user's email address">
                    {getFieldDecorator('email', {
                        initialValue: this.state.form_data.email,
                        rules: [
                            {
                                required: true, message: "Email address is required!"
                            },
                            {
                                type: 'email', message: 'The input is not a valid email address!'
                            },
                        ],
                    })(
                        <Input type="email" />,
                    )}
                </Form.Item>
                <Form.Item>
                    <Button
                        type="primary"
                        htmlType="submit"
                    >
                        {this.props.btnText}
                    </Button>
                </Form.Item>
            </Form >
        );
    }
}

const ParticipantForm = Form.create()(CustomParticipantForm);

const mapStateToProps = state => {
    return {
        stateParticipantData: state.participant
    }
}

const mapDispatchToProps = dispatch => {
    return {
        addParticipant: (data) => dispatch(addParticipant(data)),
        updateParticipant: (data, participantID) => dispatch(updateParticipant(data, participantID)),
        fetchParticpant: (cid) => dispatch(fetchParticpant(cid))
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(ParticipantForm);

import React，{Component}来自'React'；
从“antd”导入{Form，Input，Button，Select}；
从'react redux'导入{connect}；
从“/actions”导入{addParticipant、updateParticipant、fetchparticipant}；
const{Option}=Select；
类CustomParticipantForm扩展组件{
状态={
confirmDirty:false，
参与者ID:null，
requestType:'post'，
表格数据：{
标识号：空，
名称：空，
电子邮件：空，
性别：空，
}
};
componentDidMount（）{
if（this.props.data！==null）{
这是我的国家({
…这个州，
表格数据：{
…此.state.form_数据，
cid:this.props.data.cid，
名称：this.props.data.name，
电子邮件：this.props.data.email，
性别：this.props.data.gender，
}
})
}
}
handleSubmit=（事件、postType、参与者ID）=>{
event.preventDefault（）；
this.props.form.validateFieldsAndScroll（异步（错误，值）=>{
如果（！err）{
交换机（postType）{
案例“post”：
等待此.props.addParticipant（值）
if（this.props.userError==null）
this.props.history.push（'/create'）；
打破
案件‘付诸表决’：
等待这个.props.updateParticipant（值，participanId）
if（this.props.userError==null）
this.props.history.push（`/participant/${participantID}`）；
打破
违约：
console.log（'default'）
}
}
});
};
HandleConfigerBlur=e=>{
const{value}=e.target；
this.setState（{confirmDirty:this.state.confirmDirty | |！！value}）；
};
handleChange=（）=>{
这是我的国家(
{
…这个州，
形式改变：正确
}
)
}
getParticipantWithCID=（e）=>{
常量{value}=e.target
const{fetchParticpant}=this.props
fetchParticpant（值）
如果（this.props.stateParticipantData.length==1）{//在上述行函数调用之前执行此行
这是我的国家({
…这个州，
表格数据：{
…此.state.form_数据，
cid:this.props.stateParticipantData[0]。cid，
名称：this.props.stateParticipantData[0]。名称，
电子邮件：this.props.stateParticipantData[0]。电子邮件，
性别：this.props.stateParticipantData[0]。性别
}
})
}否则{
这是我的国家({
…这个州，
requestType:'post'，
参与者ID:null，
表格数据：{
cid：值，
名称：空，
电子邮件：空，
性别：空
}
})
}
}
render（）{
常量格式布局=
this.props.formLayout===“水平”
? {
labelCol:{span:6}，
wrapperCol:{span:14}，
}
：null；
const{getFieldDecorator}=this.props.form；
const prefixSelector=getFieldDecorator（'prefix'{
初始值：“975”，
})(
+975
,
);
返回(
这项活动，
this.state.requestType，
这个州的参与者
)}
>
{getFieldDecorator（'cid'{
初始值：this.state.form_data.cid，
规则：[
{
必需：true，消息：“校友的CID是必需的！”，
数字：{
消息：“请提供有效的CID编号。”
}
},
],
})(
,
)}
{getFieldDecorator（'name'{
initialValue:this.state.form_data.name，
规则：[
{
要求：正确，
信息：“需要参与者的全名！”
},
{
键入：“字符串”，
消息：“参与者的全名必须为字符串！”
},
],
})(
,
)}
{getFieldDecorator（'性别'{
initialValue:this.state.form_data.gender，
规则：[
{
必填项：true，消息：“性别必填！”
},
],
})(
男性
女性
,