React函数组件中Kendo UI DropDown的状态设置与取值问题

咱们一步步理清楚问题所在，然后搞定它：

首先，你碰到的Objects are not valid as a React child错误，核心原因是你直接把保存选中项的对象dropdownlistCategory渲染到了JSX里——React没办法直接渲染一个对象，必须取出对象里的具体属性值才行。另外，你的状态更新逻辑也有问题：Kendo React的DropDownList的onChange事件参数不是标准DOM事件，不能用event.target.name和event.target.value那套方式获取值。

具体修正步骤： #

1. 正确处理onChange事件

Kendo的DropDownList触发onChange时，会传递一个包含dataItem（选中的完整数据对象）、value（对应你设置的dataItemKey的值，也就是CategoryID）的参数。我们可以直接用这个参数更新状态：

• 如果你想保存完整的选中对象，可以这么写：

function handleDropDownChange(event){
  // 直接把选中的完整数据项存入状态
  setValues(event.dataItem);
}

• 如果你只需要保存选中项的名称，可以简化为：

function handleDropDownChange(event){
  setValues(event.dataItem.CategoryName);
}

2. 正确渲染状态值

因为初始状态是null，渲染时要先判断状态是否存在，避免访问null的属性报错：

• 如果状态存的是完整对象：

<p> Selected item is {dropdownlistCategory?.CategoryName} </p>

这里的?.是可选链操作符，当dropdownlistCategory为null时，会直接返回undefined，不会抛出错误。

• 如果状态存的是名称：

<p> Selected item is {dropdownlistCategory || '未选择'} </p>

完整修改后的代码（保存完整对象版本） #

import React,{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 [selectedCategory, setSelectedCategory] = useState(null);
  
  function handleDropDownChange(event){
    // 保存选中的完整数据项
    setSelectedCategory(event.dataItem);
  }

  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 {selectedCategory?.CategoryName || '未选择'} </p>
    </div>
  );
}

export default App;

额外小提示 #

我把状态变量名改成了selectedCategory，比原来的dropdownlistCategory更直观，你可以根据自己的习惯调整。另外，只有当你需要同时管理多个表单控件状态时，才需要用[event.target.name]: value这种对象式的状态管理，单个下拉框直接存对应值就足够啦。

内容的提问来源于stack exchange，提问作者user3226524