реакция-выбор не сбрасывает значение при изменении состояния

Question

У меня есть 2 выбранных страны ввода, которые я хочу сбросить на заполнитель по умолчанию при сбросе всех состояний внутри формы. Я использую 2 переменные состояния для хранения стран, у меня есть функция, которая сбрасывает мое состояние, но выбор входов не сбрасывается по умолчанию. Он остается выбранным в последней выбранной стране. Я сбросил состояние до нуля, но не могу заставить его работать. Не могли бы вы помочь мне здесь?

class FormularioCalcular extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      moneda1: '',
      monto1: '',
      moneda1placeholder: 'Cantidad a enviar',
      moneda1disable: false,
      moneda2: '',
      monto2: '',
      moneda2placeholder: 'Cantidad a recibir',
      moneda2disable: false,
      pais1: null,
      pais2: null,
      disable: false

    };

    this.timeout = 0;

    this.moneda1Cambio = this.moneda1Cambio.bind(this);
    this.moneda2Cambio = this.moneda2Cambio.bind(this);

    this.baseState = this.state;
  }

  pais1Cambio = select => {
    let value = select.value;
    let value2 = prefijoMoneda(value);
    this.setState({
      pais1: value,
      moneda1: value2
    });
  };

  pais2Cambio = select => {
    let value = select.value;
    let value2 = prefijoMoneda(value);
    this.setState({
      pais2: value,
      moneda2: value2
    });
  };

  resetState = () => {
    this.setState(this.baseState);
    this.setState({
      pais1: null,
      pais2: null
    });
    ReactTooltip.hide();
  };

Это мои выбранные компоненты, если я использую параметр value на нем, он вылетает и я не могу изменить страну, в которой он остается в сообщении по умолчанию для заполнителя.

        <Select
          name="paisorigen"
          onChange={this.pais1Cambio}
          options={paises}
          className="paisSelectContainer"
          classNamePrefix="paisSelect"
          placeholder="Pais de origen"
          isDisabled={this.state.disable}
        />

        <Select
          name="paisdestino"
          onChange={this.pais2Cambio}
          options={paises}
          className="paisSelectContainer"
          classNamePrefix="paisSelect"
          placeholder="Pais destino"
          isDisabled={this.state.disable}
        />

ОБНОВЛЕНИЕ

Значение параметра, при котором происходит сбой, потому что он должен получить и объект со значением и меткой, как это.

        <Select
          name="paisorigen"
          onChange={this.pais1Cambio}
          options={paises}
          className="paisSelectContainer"
          classNamePrefix="paisSelect"
          placeholder="Pais de origen"
          isDisabled={this.state.disable}
          value={{ value: this.pais1, label: labelPais(this.pais1) }}
        />

Но теперь у меня возникла проблемапотому что, когда я нажимаю какую-то опцию. Это остается в значении по умолчанию. Это функция, которую я использую onChange

  pais1Cambio = select => {
    let value = select.value;
    let value2 = prefijoMoneda(value);
    this.setState({
      pais1: value,
      moneda1: value2
    });
  };

Answer 1

Попробуйте передать значение prop в ваш компонент Select, например value={this.state.pais1}

Answer 2

Мое внимание привлекло несколько вещей:

1. Когда вы делаете this.baseState = this.state; в конструкторе, вы не копируете состояние, а просто ссылаетесь на него, поэтомупозже, когда вы обновляете this.state, вы также обновляете this.baseState. Чтобы скопировать его: this.baseState = Object.assign({}, this.state).

2. Ваша функция resetState имеет 2 вызова на setState. Попробуйте объединить их:

resetState = () => {
    this.setState({
       ...this.baseState,
       // There's no need to set pais1 and pais2 to null here since baseState already have them as null
       // pais1: null,
       // pais2: null   
    });

    // or simply...
    // this.setState(this.baseState)

    ReactTooltip.hide();
  };

Попробуйте и посмотрите, поможет ли это отладить происходящее.

       <Select
          name="paisorigen"
          onChange={(e) => {
            console.log({e}) // and check your console to see what's coming back here
            this.setState({pais1: e.value})
          }}
          options={paises}
          className="paisSelectContainer"
          classNamePrefix="paisSelect"
          placeholder="Pais de origen"
          isDisabled={this.state.disable}
          value={this.state.pais1}
        />
    ```

Answer 3

Если вы попытаетесь связать pais1Cambio и pais2Cambio в конструкторе, это сработает?