El código My React js que se proporciona a continuación tiene la intención de llenar o cambiar el valor inicial de la entrada al cambiar el valor de la entrada cid (con la activación de onBlur), pero los valores se rellenan o cambian solo después de activar onBlur dos veces. Ayúdame a identificar dónde estoy cometiendo un error. El código es el siguiente:

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); 

Che Ku

es un nuevo contribuyente a este sitio. Tenga cuidado al pedir aclaraciones, comentarios y respuestas. Mira nuestro

Código de Conducta

.