反应选择警告隐藏到不受控制 [英] React-select warning hidden to uncontrolled
问题描述
我在我的代码中使用了 react-select:
import React, {Component} from 'react';import Select, {createFilter} from 'react-select';让 _ = 要求('下划线')类测试扩展组件{构造函数(道具){超级(道具)；this.state = {variables_api: [],selected_question_obj:空};this.handleChange_question = this.handleChange_question.bind(this)}componentDidMount() {fetch('http://127.0.0.1:5000/variables').then(res => {返回 res.json()}).then(数据=> {this.setState({variables_api:数据});})}handleChange_question(evt){this.setState({selected_question_obj: evt});}使成为 () {var key_api = this.state.variables_api.map(obj => {返回 {key_api: obj['index'],question_api: obj['标签变量'],};})var key = _.groupBy(key_api, 'question_api');var question_uni = Object.keys(key);var selector_q_options = []for (var i=0; i);};}导出默认测试
一切正常，期待这样一个事实，即当我选择某些内容时，我会收到此警告:
<块引用>组件正在将隐藏类型的受控输入更改为不受控制.输入元素不应从受控切换到不受控制(反之亦然).决定使用受控或组件生命周期内不受控制的输入元素.
如果我将 selected_question_obj 从 null 转换为 {}，错误会消失，但组件无法正确显示(就像您已经选择了某些东西一样).
你能帮我吗?如果您在代码中看到一些奇怪的东西，请记住，我同时使用了 js 并且反应了不到一个月，因此我们不胜感激.谢谢！
看起来您收到该错误的原因是因为您传递给 的选项不是适当的接口.它看起来像 react-select 调用 这个辅助函数从每个选项中获取值，它返回undefined.
尝试将选项键的 "key" 更改为 "value":
for (var i=0; i为此:
for (var i=0; iI'm using react-select in my code:
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
Everything works fine, expect for the fact that, when I select something, I receive this warning:
A component is changing a controlled input of type hidden to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
If I sub selected_question_obj from null to {}, the error vanishes but then the component is not displayed correctly (like if you already selected something).
Can you help me please? If you see something strange into the code, bear in mind that I'm using both js and react for less than a month, so any comment is appreciated. Thanks!
It looks like the reason you are getting that error is because the options you are passing into the <Select> are not the proper interface. It looks like react-select calls this helper function to get the value from each option and it is returns undefined.
Try changing "key" to "value" for your option keys:
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)
}
to this:
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)
}
这篇关于反应选择警告隐藏到不受控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
