同じ配列の下に複数の値を投稿するフェッチをフェッチしよう

Question

tagの複数の値をフェッチする配列内に投稿しようとしています。

ただし、1つのアレイに接続して投稿しています。私はそれは常にそれtagは現在、私はまた、より多くの提案を歓迎 tagが

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

を送信する必要がありますか

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

を送っ方法

を投稿したいと思います

このフォームを行うためのクリーンで効率的な方法。 this.state.valueの上にhandleSubmit機能で

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

、あなたのマッピング機能（後に長い説明を参照）の値を返すことはありません。ここで

は私のコードです。たとえそれが戻ってきたとしても、すべてのname値を持つ単一要素の配列しか持たないでしょう。

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

長い説明：に体組成を変更してみてくださいアロー関数が暗黙のうちに返し、あなたがそのような場合には、機能ブロックとして解釈されている中括弧、中に体を包囲し、明示的なリターンを使用する必要がない場合。丸カッコでリテラルオブジェクトを囲むことで、暗黙的に1つを返すことができます。

次の2つの例は等価です。そのため

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

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