如何强制我的组件不重复使用相同的值？

Question

I have a React form where my users can fill their informations. Once it's done, they click submit and it brings them to the second part of the form. However, there seems to be an issue since when I get on the second part of the form, it's already been filled with data from the previous form when it shouldn't...

I guess React does this to not have to re-render everytime, but it kinda bugs my application.

Here is the code for my Form and the Input. I didn't put all of the input since only the first 3 are concerned.

How can I make sure that the data from the first render isn't reused on the second render?

Thanks!

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import FormTemplate from 'components/templates/FormTemplate';
import TextInput from 'components/forms/TextInput';
import Form from 'components/forms/Form';
import FormGroup from 'components/forms/FormGroup';
import TextareaInput from 'components/forms/TextareaInput';
import FileInput from 'components/forms/FileInput';
import { withTranslation } from 'react-i18next';
import Submit from 'components/forms/Submit';
import DropdownMultiple from 'components/forms/DropdownMultiple';
import { connect } from 'react-redux';
import instance from 'axiosInstance';
import { addErrors } from 'redux/actions';
import DropdownSingle from 'components/forms/DropdownSingle';
import { formToFormData } from 'utils';

export class SendApplication extends Component {
  constructor (props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = { interests: [], fieldsOfWork: [], salary: [], loading: true, stage: 1 };
  }

  handleSubmit (e) {
    e.preventDefault();
    this.setState({ loading: true });
    var fd = formToFormData(['email', 'first_name', 'last_name', 'phone_number', 'address', 'field_of_work', 'interests', 'salary_id', 'availability', 'job_type'], this.props.form);
    instance.post('/candidate', fd).then((success) => {
    }, (error) => {
      this.props.addErrors(error.response.data.errors, 'candidate-signup');
    }).then(() => {
      this.setState({ loading: false });
    });
  }

  componentDidMount () {
    instance.get('/candidate-data')
      .then((success) => {
        this.setState({
          loading: false,
          interests: success.data.interests,
          fieldsOfWork: success.data.fieldsOfWork,
          salary: success.data.salary,
          availability: success.data.availability,
          job_type: success.data.job_type
        });
      });
  }

  render () {
    return (
      <FormTemplate loading={this.state.loading} title={this.props.t('pages:sendApplication')}>
        {(this.state.stage === 1)
          ? <Form onSubmit={(e) => {
            e.preventDefault();
            this.setState({ stage: 2 });
          }} name="candidate-signup">
            <FormGroup>
              <TextInput name="first_name" />
              <TextInput name="last_name" />
            </FormGroup>
            <TextInput name="email" type="email" />
            <TextInput name="phone_number" />
            <TextInput name="address" />
            <DropdownMultiple name="field_of_work" options={this.state.fieldsOfWork} />
            <DropdownMultiple name="interests" options={this.state.interests}/>
            <DropdownSingle name="salary_id" options={this.state.salary} />
            <DropdownMultiple name="availability" options={this.state.availability} />
            <DropdownMultiple name="job_type" options={this.state.job_type} />
            <DropdownMultiple name="training"/>
            <DropdownMultiple name="work_experiences"/>
            <FileInput name="uploadCV" subtitle={this.props.t('uploadCVFormats')} accepted="pdf,docx" />
            <FileInput name="uploadVideoCV" subtitle={this.props.t('uploadVideoCVFormat')} required={false} />
            <Submit />
          </Form>
          : <Form onSubmit={this.handleSubmit} name="candidate-signup">
            <TextInput name="email" type="email" />
            <TextInput name="email_confirmation" type="email" />
            <TextInput name="password" />
            <TextInput name="password_confirmation" />
            <Submit />
          </Form>
        }

      </FormTemplate>
    );
  }
}

SendApplication.propTypes = {
  t: PropTypes.func.isRequired
};

SendApplication.defaultProps = {
  form: {}
};

const mapStateToProps = ({ input }) => {
  return {
    form: input['candidate-signup']
  };
};

export default connect(mapStateToProps, { addErrors })(withTranslation('common')(SendApplication));

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';
import { handleChange } from 'redux/actions';
import { connect } from 'react-redux';
import FormContext from 'context/FormContext';

export class TextInput extends Component {
  constructor (props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  getRequired () {
    if (this.props.required === true) {
      return <span className="tw-font-semibold tw-text-red-500 tw-text-sm tw-ml-2">{this.props.t('required')}</span>;
    }
  }

  handleChange (e, context) {
    var value = e.target.value;
    this.props.handleChange(this.props.name, value, context.name);
  }

  getValue (context) {
    if (this.props.input && this.props.input[context.name] && this.props.input[context.name][this.props.name]) {
      return this.props.input[context.name][this.props.name];
    } else {
      return undefined;
    }
  }

  render () {
    return (
      <FormContext.Consumer>
        {context =>
          <div className={`tw-flex tw-flex-col ${this.props.size} tw-px-2 tw-mb-3`}>
            <label htmlFor={this.props.name} className="tw-text-sm tw-font-bold">{this.props.title || this.props.t('common:' + this.props.name)}{this.getRequired()}</label>
            <input 
              value={this.getValue(context)}
              onChange={(e) => {
              this.handleChange(e, context);
            }} type={this.props.type} id={this.props.name} placeholder={this.props.title} className="focus:tw-outline-none focus:tw-shadow-outline tw-bg-gray-300 tw-rounded-lg tw-py-2 tw-px-3" />
            {this.props.errors && this.props.errors[context.name] && this.props.errors[context.name][this.props.name] && (
              <div className="tw-bg-red-100 tw-mt-2 tw-border-l-4 tw-border-red-500 tw-text-red-700 tw-p-2 tw-text-sm">
                <p>{this.props.errors[context.name][this.props.name]}</p>
              </div>
            )}

          </div>
        }
      </FormContext.Consumer>

    );
  }
}

TextInput.defaultProps = {
  size: 'w-full',
  required: true,
  type: 'text'
};

TextInput.propTypes = {
  name: PropTypes.string.isRequired,
  title: PropTypes.string,
  size: PropTypes.string.isRequired,
  required: PropTypes.bool,
  type: PropTypes.string,
  t: PropTypes.func.isRequired
};

const mapStateToProps = ({ errors, input }, ownProps) => {
  return {
    errors: errors,
    input: input
  };
};

export default connect(mapStateToProps, { handleChange })(withTranslation(['input'])(TextInput));

Answer 1

You can use the key to solve this problem.
inside SendApplication component, add a prop key={this.state.stage} in FormTemplate , like this

<FormTemplate key={this.state.stage} loading={this.state.loading} title={this.props.t('pages:sendApplication')}>
// your rest of the code
</FormTemplate>