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

Question

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

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

我希望它总是发布

当前如何发送标签

标签:[{名称:[null, null]}]

如何发送标签

标签:[
{名称:“字段值”}，
{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>
    );
  }
}

Answer 1

在您的 handleSubmit 函数中，您在 this.state.value 上的映射函数永远不会返回值(请参阅稍后的详细说明)。即使它确实返回，您也只会得到一个包含单个元素和所有 name 值的数组。尝试将 body 成分更改为:

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

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

以下两个示例是等效的:

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

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