Javascript 从数据库编辑对象时，React onChange（）不适用于自定义对象的下拉列表值

在数据库中编辑现有文章对象时，我无法更改类别的下拉值。类别是一个对象，它是我的文章对象的属性（字段）

我在网上做了很多研究，但无法解决这个问题。我可以成功更改值并提交字符串字段的更改，例如文章标题和文章文本

这是代码。问题似乎出在handleChange（）和/或

class ArticleEdit扩展组件{
emptyItem={
文章标题：''，
第条案文：“，
imageUrl:“”，
类别：{}，
标签：[]
};
建造师（道具）{
超级（道具）；
此.state={
项目：this.emptyItem，
类别：[]
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
异步组件didmount（）{
让allCategories=[]；
if（this.props.match.params.articleId！=“新建”）{
const article=await（await fetch（`/articles/${this.props.match.params.articleId}'）.json（）；
获取（“/categories”）
。然后（响应=>{
返回response.json（）；
})。然后（数据=>{
allCategories=data.\u embedded.categorilylist.map（category=>{
退货类别
});
this.setState（{项目：文章，类别：所有类别}）；
});
}
}
手变（活动）{
const target=event.target
const name=target.name；
常量值=target.value；
让item={…this.state.item}；
项目[名称]=价值；
this.setState（{item}）；
log（“您选择的类别是：“+item.category.categoryName”）；
警报（“您选择的类别为：“+item.category.categoryName”）；
}
异步handleSubmit（事件）{
event.preventDefault（）；
const{item}=this.state；
等待获取（（item.articleId）“/articles/”+（item.articleId）：“/articles”{
方法：（item.articleId）？'PUT'：'POST'，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（项目），
});
this.props.history.push（'/articles'）；
}
render（）{
const{item}=this.state；
const categoriesToDisplay=this.state.categories
const categoryOptionItems=categoriesToDisplay.map（category=>
{category.categoryName}
);
const title={item.articleId？'Edit Article'：'Create Article'}；
返回(
{title}
标题
正文
图像URL
选择类别
this.handleChange（{target:{name:'categoryName'，value}}}>
挑选
{categoryOptionItems}
选择标签
tag.tagName）| |''}onChange={this.handleChange}multiple>
抑郁
焦虑
恐惧症
心理治疗
注意
宗教
超自然的
康复
东方实践
动机
关系
积极思考
情绪
自助
时间管理
从经验中学习
个人发展方法
保存{'}
取消
);
}
}

当我点击我的文章列表页面上的“编辑”按钮并转到包含现有文章形式的页面时，我会在“选择类别”下拉列表中看到我的文章类别预选

当我尝试选择其他类别时，它会发出警报并记录现有类别的名称，请参阅。之后，我在下拉列表中看到现有类别，无法更改它

如何为本文成功选择（并提交）新类别

先谢谢你

onChange={value => this.handleChange({target : {name : 'categoryName', value}})}

我相信类别的onChange函数将接收事件，而不是值。你可以通过

<Input name="categoryName" onChange={this.handleChange} > { options } </Input>

我注意到的一个问题是设置

fetch（'/categories'）

response的方式不正确

fetch ('/categories')
  .then(r => r.json())
  .then(r => this.setState({ categories: r }));

---

这将确保只有在解决fetch调用后，才会设置处于状态的类别。

这将演示如何使用“选择”下拉菜单编辑/创建类别对象、文章属性以及文章上标记对象的“点击多选”功能

import React，{Component}来自'React'；
从“react router dom”导入{Link，withRouter}；
从“reactstrap”导入{按钮、容器、表单、表单组、输入、标签}；
从“./头”导入头；
从“./Footer”导入页脚；
类ArticleEdit扩展组件{
emptyItem={
文章标题：''，
第条案文：“，
imageUrl:“”，
类别：{}，
标签：[]
};
建造师（道具）{
超级（道具）；
此.state={
项目：this.emptyItem，
类别：[]，
所有标签：[]
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleTagChange=this.handleTagChange.bind（this）；
}
异步组件didmount（）{
获取（“/categories”）
.then（response=>response.json（））
.then（data=>this.setState（{categories:data._embedded.categoryList}））；
获取（“/tags”）
.then（response=>response.json（））
.then（data=>this.setState（{allTags:data.\u embedded.tagList}））；
if（this.props.match.params.articleId！=“新建”）{
const article=await（await fetch（`/articles/view/${this.props.match.params.ar
onChange={e => 
  this.handleChange({
    ...e,
    target: {
      ...e.target,
      name: 'categoryName'
    }
  })
}

fetch ('/categories')
  .then(r => r.json())
  .then(r => this.setState({ categories: r }));