React-select предупреждение скрыто для неконтролируемого - PullRequest
Новая
       4

React-select предупреждение скрыто для неконтролируемого

1 голос
/ 16 января 2020

Я использую реагировать на выбор в моем коде: 

import React, {Component} from 'react';
import Select, {createFilter} from 'react-select';

let _ = require('underscore')

class Test extends Component {

  constructor(props) {
    super(props);
    this.state = {
      variables_api: [],
      selected_question_obj: null
    };
    this.handleChange_question = this.handleChange_question.bind(this)
  }

  componentDidMount() {
    fetch('http://127.0.0.1:5000/variables')
    .then(res => {
      return res.json()})
    .then(data => {
      this.setState({
        variables_api: data
      });
    })
  }

  handleChange_question(evt) {
    this.setState({
      selected_question_obj: evt
    });
  }

  render () {
    var key_api = this.state.variables_api.map(obj => {
      return {
        key_api: obj['index'],
        question_api: obj['Label Variabile'],
      };
    })
    var key = _.groupBy(key_api, 'question_api');

    var question_uni = Object.keys(key);
    var selector_q_options = []
    for (var i=0; i<question_uni.length; i++) {
      var temp_0 = {
        key: i.toString(),
        label: question_uni[i]
      };
      selector_q_options.push(temp_0)
    }

    console.log(this.state)

    return (
      <div>

      <Select
        name='question_selector'
        value={this.state.selected_question_obj}
        onChange={this.handleChange_question.bind(this)}
        options={selector_q_options}
        filterOption={createFilter({ignoreAccents: false})}
        placeholder='Select question:'/>

      </div>
    );
  };
}

export default Test

Все работает отлично, ожидайте того факта, что когда я выбираю что-то, я получаю это предупреждение:

Компонент изменяет контролируемый вход скрытого типа на неконтролируемый. Входные элементы не должны переключаться с контролируемого на неуправляемый (или наоборот). Выберите между использованием контролируемого или неконтролируемого элемента ввода в течение срока службы компонента.

Если я подставил selected_question_obj с нуля на {}, ошибка исчезнет, ​​но затем компонент не будет отображаться правильно (например, если вы уже что-то выбрал).

Можете ли вы мне помочь, пожалуйста? Если вы видите что-то странное в коде, имейте в виду, что я использую оба js и реагирую менее месяца, поэтому любые комментарии приветствуются. Спасибо!

Ответы [ 2 ]

1 голос
/ 16 января 2020

Похоже, причина того, что вы получаете эту ошибку, заключается в том, что параметры, которые вы передаете в <Select>, не являются надлежащим интерфейсом. Похоже, react-select вызывает эту вспомогательную функцию , чтобы получить значение из каждой опции, и она возвращает undefined.

Попробуйте изменить "key" на "value" для своих дополнительных клавиш: 

for (var i=0; i<question_uni.length; i++) {
  var temp_0 = {
    key: i.toString(),       // should be 'value' instead of 'key'
    label: question_uni[i]
  };
  selector_q_options.push(temp_0)
}

на это: 

for (var i=0; i<question_uni.length; i++) {
  var temp_0 = {
    value: i.toString(),      // changed to 'value'
    label: question_uni[i]
  };
  selector_q_options.push(temp_0)
}
1 голос
/ 16 января 2020

Попробуйте пустую строку. К сожалению, использование нулевого или неопределенного значения входных данных приводит к этой ошибке. Примерно так может работать: 

<Select
    name='question_selector'
    value={this.state.selected_question_obj || ""}
    onChange={this.handleChange_question.bind(this)}
    options={selector_q_options}
    filterOption={createFilter({ignoreAccents: false})}
    placeholder='Select question:'/>
...