Question

如何使用kendo-ui下拉列表作为功能组件来使用状态值？尝试打印选中项目，但出现错误未捕获的不变违规：对象作为React无效子级（找到：带有键{CategoryName}的对象）。如果您打算呈现儿童集合，改用数组。如何使用状态值？我不想使用类组件。这是我的代码：

    import React,{Component,useState } from 'react';
    import './App.css';
    import { DropDownList } from '@progress/kendo-react-dropdowns';
    import '@progress/kendo-theme-material/dist/all.css'; 
    import categories from './categories.json';

   function App() {
   const [dropdownlistCategory,setValues] = useState(null);
    function handleDropDownChange(event){
     setValues(() => ({
       [event.target.name]: event.target.value,
     }));
   }

  return (
   <div className="App">
     <h1>Hello KendoReact!</h1>
     <p>
      <DropDownList
       name = "CategoryName"
       data={categories}
       dataItemKey="CategoryID"
       textField="CategoryName"
       defaultItem={{CategoryID: null, CategoryName: "Product categories"}}
       onChange = {handleDropDownChange}
       />
     </p>
    <p>
      Selected item is {dropdownlistCategory}
    </p>
    </div>
   );
  }

   export default App;
 ````

  Trying to print the selected item in meny but getting error as '
   react-dom.development.js:14850 Uncaught Invariant Violation: Objects are not valid as a React 
  child (found: object with keys {CategoryName}). If you meant to render a collection of children, 
use an array instead. 
 How do I use the state value?'

Answer 1

当您尝试直接在组件内部显示对象的内容而不进行循环时，会发生这种错误。因此，只要您有一个对象并且想要显示其数据，就尝试在其上进行映射。

如何在kendo-ui下拉菜单中设置状态

1 个答案: