未捕獲的類型錯誤：r.current.contains 不是劍道 DriopDownList 中的 function

Question

在使用 Kendo React 時，我想添加一個 Kendo DropDownList。 我試圖用這樣的數據填充列表：

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" }

使用 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);
        }
      })();
     
       }, []);

因此，“sektor”用作將填充 Kendo 下拉列表的對象數組：

<DropDownList data={sektor} value={sektorV} style={{marginTop:'2%'}} onChange={handleChangeSektor} textField="name" dataItemKey="id"/>
...
...
const handleChangeSektor = (event) => {
      setSektorV(event.target.value);
    };

'sektorV' 是一個 state，它保存了從 KendoDropDown 中選取的 object，其定義如下：

const[sektorV, setSektorV] = useState({id: -1, name: "All"});

一切似乎都是正確的，但是當我點擊 DropDown 時，屏幕變白，這是控制台記錄的：

Uncaught TypeError: r.current.contains is not a function
...
Uncaught TypeError: _utils__WEBPACK_IMPORTED_MODULE_2__.getItemValue(...) is null

我當前的項目中有很多下拉菜單，它們都運行良好。 任何人都可以看到問題嗎？

Answer 1

只是基於這個有限的代碼上下文的預感，但我認為拋出這個錯誤是因為第一個元素在resSektor.data.rlista數組中有一個null name屬性。

試試setSektor(resSektor.data.rlista.slice(1)); 要刪除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);
    }
  })();
}, []);