Reactjs 来自onSelect的事件返回null

所以我有一个奇怪的问题，很抱歉我还是一个新手，但我有一个下拉列表，我希望能够从中选择并传递回表单提交。当我手动执行下拉行项目时，它工作得很好，但是当我从后端检索它，然后映射，并尝试处理onSelect，但是onSelect上的事件一直返回null-非常混乱-您在代码中看到任何明显的东西吗

从“React”导入React，{useffect，useState}； 从“../hooks/httphook”导入{useHttpClient}； 从“../util/validators”导入{validate}； 导入'bootstrap/dist/css/bootstrap.min.css'； 从“反应引导/下拉按钮”导入下拉按钮； 从“反应引导/下拉”导入下拉列表； 导入“/Input.css”； const Select=props=>{ console.log'props.id='+props.id； console.log'props.label='+props.label； const[selValue，setSelValue]=useState； const{isLoading，error，sendRequest，clearError}=useHttpClient； 常量[loadedFoodgroups，setLoadedFoodgroups]=useState[]； useEffect=>{ const fetchFoodgroups=async=>{ 试一试{ const responseData=等待发送请求'http://localhost:5000/api/foodgroups' SetLoadedFoodGroupsResponseA； log'ResponseData'+JSON.stringifyresponseData； }捕获错误{} }; 获取食物组； }，[sendRequest]； const handleSelect=事件=>{ 违约事件； console.log'Select.js:handleSelect-event e='+event.target.value； 设置selvalueevent.target.value； } 回来 {props.label} {loadedFoodgroups.mapselectOptions=> {selectOptions.name} } ; }; 导出默认选择；

---

虽然基本问题在其他一些问题中得到了回答，但你有一些事情需要改变，因此这里有一个更具体的答案：

首先，onSelect的签名是eventKey，event=>…，但是在我的测试中，第二个参数是无用的，目标是null。因此，即使切换到使用处理程序中的第二个参数，它也可能不起作用。相反，大多数人似乎是这样使用eventKey参数的：

const handleSelect = eventKey => {
  event.preventDefault();
  setSelValue(eventKey);
}

这可能会满足你的需要

在这对您起作用之前，有三个打字错误需要纠正：

<Dropdown.Item
  key={selectOptions._id}. <--you have ".id" i your code but the data is "._id"
  className="form-control__select"
  eventKey={selectOptions.name}  <--you have "eventkey", with lowercase "k",             
                      // should be upper case.  
                      // You probably want the ".name" property here rather than
                      // "id", this is what will be passed into "onSelect"
>

---

因此，如果您将处理程序更改为使用第一个参数作为eventKey并修复上面的打字错误，您应该能够将状态设置为从下拉按钮中选择的值。

更多信息。会有帮助的。但是onSelect上的事件一直返回null-您的意思是event.target.value为null吗。更重要的是，您可以发布console.log'ResponseData'+JSON.stringifyresponseData的输出吗？yes event.target.value为null-console.log。。。这里包括：ResponseData[{foods:[5f0baddcb194e0a15ecadb4d]，[u id:5f0b8f43481b9a573f53ac4c，名称：水果，[u v:5}，{foods:[]，[u id:5f0bad545a16e69eccaf9e1a，名称：谷物，[5f0c9939000b7e768103a3,5f0c9981000b7e8101a5]，[u id:5f0c81000b7e9801a5]，[u id:5f0c100a0a0a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1！谢谢亨利-谢谢你的帮助！那很有魅力！我很高兴这帮助了阿什！你介意接受我的回答吗，因为它帮了你的忙？谢谢