Мой код React js, приведенный ниже, предназначен для заполнения или изменения начального значения ввода при изменении значения ввода cid (с запуском 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) ={amp}gt; { event.preventDefault(); this.props.form.validateFieldsAndScroll(async (err, values) ={amp}gt; { 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 ={amp}gt; { const { value } = e.target; this.setState({ confirmDirty: this.state.confirmDirty || !!value }); }; handleChange = () ={amp}gt; { this.setState( { ...this.state, formChanged: true } ) } getParticipantWithCID = (e) ={amp}gt; { 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', })( {amp}lt;Select style={{ width: 80 }}{amp}gt; {amp}lt;Option value="975"{amp}gt; 975{amp}lt;/Option{amp}gt; {amp}lt;/Select{amp}gt;, ); return ( {amp}lt;Form layout={this.props.formLayout} autoComplete="off" onSubmit={event ={amp}gt; this.handleSubmit(event, this.state.requestType, this.state.participantID )} {amp}gt; {amp}lt;Form.Item label="CID No." {...formItemLayout} extra="Please enter Alumni's CID "{amp}gt; {getFieldDecorator('cid', { initialValue: this.state.form_data.cid, rules: [ { required: true, message: "Alumni's CID is required!", numeric: { message: "Please Provide valid CID No." } }, ], })( {amp}lt;Input type="text" onBlur={this.getParticipantWithCID} /{amp}gt;, )} {amp}lt;/Form.Item{amp}gt; {amp}lt;Form.Item label="Name" {...formItemLayout} extra="Please enter user's full name"{amp}gt; {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!" }, ], })( {amp}lt;Input type="text" /{amp}gt;, )} {amp}lt;/Form.Item{amp}gt; {amp}lt;Form.Item label="Gender" {...formItemLayout} extra="Please select Gender"{amp}gt; {getFieldDecorator('gender', { initialValue: this.state.form_data.gender, rules: [ { required: true, message: "Gender is required!" }, ], })( {amp}lt;Select placeholder="Select Gender" {amp}gt; {amp}lt;Option value="Male"{amp}gt;Male{amp}lt;/Option{amp}gt; {amp}lt;Option value="Female"{amp}gt;Female{amp}lt;/Option{amp}gt; {amp}lt;/Select{amp}gt;, )} {amp}lt;/Form.Item{amp}gt; {amp}lt;Form.Item label="Email" {...formItemLayout} extra="Please enter user's email address"{amp}gt; {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!' }, ], })( {amp}lt;Input type="email" /{amp}gt;, )} {amp}lt;/Form.Item{amp}gt; {amp}lt;Form.Item{amp}gt; {amp}lt;Button type="primary" htmlType="submit" {amp}gt; {this.props.btnText} {amp}lt;/Button{amp}gt; {amp}lt;/Form.Item{amp}gt; {amp}lt;/Form {amp}gt; ); } } const ParticipantForm = Form.create()(CustomParticipantForm); const mapStateToProps = state ={amp}gt; { return { stateParticipantData: state.participant } } const mapDispatchToProps = dispatch ={amp}gt; { return { addParticipant: (data) ={amp}gt; dispatch(addParticipant(data)), updateParticipant: (data, participantID) ={amp}gt; dispatch(updateParticipant(data, participantID)), fetchParticpant: (cid) ={amp}gt; dispatch(fetchParticpant(cid)) } } export default connect(mapStateToProps, mapDispatchToProps)(ParticipantForm); 

Че Ку

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,