[英]Uncaught TypeError: r.current.contains is not a function in kendo DriopDownList
While working with Kendo React, I wanted to add a Kendo DropDownList.在使用 Kendo React 时,我想添加一个 Kendo DropDownList。 I tried to fill the list with data like this:我试图用这样的数据填充列表:
Array(8) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ]
0: Object { id: -1, name: null }
1: Object { id: 1, name: "A" }
2: Object { id: 2, name: "B" }
3: Object { id: 3, name: "C" }
4: Object { id: 4, name: "D" }
5: Object { id: 5, name: "E" }
6: Object { id: 6, name: "F" }
7: Object { id: 77, name: "G" }
The data is fetched with axios and put inside useState in UseEffect:使用 axios 获取数据并放入 UseEffect 的 useState 中:
const[sektor, setSektor] = useState([]);
...
...
useEffect(() => {
(async() =>{
try{
const resSektor = await services.getSektor();
console.log(resSektor.data.rlista); //JSON above is this console log
setSektor(resSektor.data.rlista);
}
catch(e){
console.log(e);
}
})();
}, []);
So, 'sektor' is used as an array of objects that will fill the Kendo dropdown:因此,“sektor”用作将填充 Kendo 下拉列表的对象数组:
<DropDownList data={sektor} value={sektorV} style={{marginTop:'2%'}} onChange={handleChangeSektor} textField="name" dataItemKey="id"/>
...
...
const handleChangeSektor = (event) => {
setSektorV(event.target.value);
};
'sektorV' is a state that saves the object that is picked from the KendoDropDown and is defined like this: 'sektorV' 是一个 state,它保存了从 KendoDropDown 中选取的 object,其定义如下:
const[sektorV, setSektorV] = useState({id: -1, name: "All"});
Everything seems to be correct, but when I click on the DropDown the screen goes white and this is console logged:一切似乎都是正确的,但是当我点击 DropDown 时,屏幕变白,这是控制台记录的:
Uncaught TypeError: r.current.contains is not a function
...
Uncaught TypeError: _utils__WEBPACK_IMPORTED_MODULE_2__.getItemValue(...) is null
I had a bunch of dropdowns in my current project and they all worked fine.我当前的项目中有很多下拉菜单,它们都运行良好。 Can anybody see the problem?任何人都可以看到问题吗?
Just a hunch based on this limited code context, but I think this error is thrown because the first element has a null
name
property in the resSektor.data.rlista
array.只是基于这个有限的代码上下文的预感,但我认为抛出这个错误是因为第一个元素在resSektor.data.rlista
数组中有一个null
name
属性。
Try setSektor(resSektor.data.rlista.slice(1));
试试setSektor(resSektor.data.rlista.slice(1));
to remove the null
value or instead of null
update that element's name
property to "ALL"
to match the initial sectorV
state.要删除null
值或代替null
,将该元素的name
属性更新为"ALL"
以匹配初始扇区 V sectorV
。
useEffect(() => {
(async() =>{
try {
const resSektor = await services.getSektor();
resSektor.data.rlista[0].name = "All";
setSektor(resSektor.data.rlista);
} catch(e) {
console.log(e);
}
})();
}, []);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.