Javascript React fetch在同一数组下发布多个值

我试图在我的fetch数组中为

标记发布多个值

但是，它将它们连接到一个数组中

我想它总是张贴它

当前如何发送标签
标记：[{name:[null，null]}]

应如何发送标签
标签：[
{name:“来自字段的值”}，
{name:“字段中的下一个值”}
]

我也欢迎大家提出更干净/高效的方式填写此表格的建议

这是我的密码：

class AddNew extends React.Component {
  constructor(props) {
    super(props);
    this.onTitleChange = this.onTitleChange.bind(this);
    this.onTagChange = this.onTagChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = {
      options: []
    };
  }
  componentDidMount() {
    fetch(TAG_API, {
    })
      .then(response => response.json())
      .then(json => {
        this.setState({ options: json });
      });
  }
  onTitleChange(e) {
    this.setState({ [e.target.name]: e.target.value });
    console.log("the title has changed" + e);
  }
  onTagChange(value) {
    this.setState({ value: value });
    console.log("they look like this" + value);
  }
  handleSubmit(e, value) {
    e.preventDefault();
    return (
      fetch(CREATE_API, {
        method: "POST",
        body: JSON.stringify({
          title: this.state.itemtitle,
          tag: [
            {
              name: this.state.value.map(e => {
                e.name;
              })
            }
          ]
        })
      })
        .then(res => res.json())
        .catch(err => console.error(err))
    );
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <textarea
            name="itemtitle"
            type="text"
            placeholder="Add new..."
            onChange={this.onTitleChange}
          />
          <button type="submit">Save</button>
        </form>
        <Select
          mode="tags"
          name="tagfield"
          onChange={this.onTagChange}
        >
          {this.state.options.map(e => (
            <Option value={e.name}> {e.name} ({e.taglevel}) </Option>
          ))}

        </Select>
      </div>
    );
  }
}

class AddNew.Component{
建造师（道具）{
超级（道具）；
this.onTitleChange=this.onTitleChange.bind（this）；
this.onTagChange=this.onTagChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
此.state={
选项：[]
};
}
componentDidMount（）{
获取（标记）API{
})
.then（response=>response.json（））
。然后（json=>{
this.setState（{options:json}）；
});
}
onTitleChange（e）{
this.setState（{[e.target.name]：e.target.value}）；
console.log（“标题已更改”+e）；
}
onTagChange（值）{
this.setState（{value:value}）；
log（“它们看起来像这样”+值）；
}
handleSubmit（e，值）{
e、 预防默认值（）；
返回(
获取（创建）API{
方法：“张贴”，
正文：JSON.stringify({
标题：this.state.itemtitle，
标签：[
{
名称：this.state.value.map（e=>{
e、 姓名；
})
}
]
})
})
.then（res=>res.json（））
.catch（err=>console.error（err））
);
}
render（）{
返回(
拯救
{this.state.options.map（e=>(
{e.name}（{e.taglevel}）
))}
);
}
}
在
handleSubmit
函数中，您在
this.state.value
上的映射函数永远不会返回值（请参阅后面的详细说明）。即使它确实返回了，也只会有一个包含所有
name
值的单个元素的数组。尝试将身体成分更改为：

body: JSON.stringify({
  title: this.state.itemtitle,
  tag: this.state.value.map(e => ({ name: e.name })),
})

更详细的解释：箭头函数隐式返回，除非将主体括在花括号中，在这种情况下，花括号被解释为函数块，并且需要使用显式返回。通过在圆括号中包围文字对象，可以隐式返回一个

以下两个示例是等效的：

const beep = () => {
   return { boop: 'bzzt' };
};

const beep = () => ({ boop: 'bzzt' });

谢谢你。奇怪的是，它返回空值“tag:[{}，{}]”。啊，我明白了-因为“e”上没有“name”字段。我将
e.name
更改为仅
e
，这可能是因为您将
e.name
指定给
选项，而不是整个对象。在不知道如何实现
Select
和
Option
的情况下，我只能推测。我将如何将整个对象分配给它？有很多可能性，但最简单的示例是
。是的，我尝试了，但没有成功。这给了我一个结果，其中包含了我所有的值，而不是几个值