React-select 警告隐藏至不受控制

Question

我在代码中使用反应选择：

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 从 null 子到 {}，错误就会消失，但组件不会正确显示（就像您已经选择了某些内容一样）。

你能帮我吗？如果您在代码中看到一些奇怪的东西，请记住我使用 js 和 React 还不到一个月，所以任何评论都值得赞赏。谢谢！

Answer 1

看起来您收到该错误的原因是因为您传递给的选项<Select>不是正确的接口。看起来调用react-select这个辅助函数来获取每个选项的值，它是 returns 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)
}