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

Question

我正在尝试在我的fetch数组中发布tag的多个值。

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

我希望它始终发布

tag当前发送的方式

tag:[{name: [null, null]}]

应如何发送tag

tag:[ {name: "value from field"}, {name: "next value from field"} ]

我也欢迎有关更干净/更有效的方式来做这种表格的建议。

这是我的代码：

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>
    );
  }
}

Answer 1

在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' });