レールに反応するコンポーネントから属性を渡すと、バック

Question

イムランニングを終了webpackerと5.2を反応し、Railsの。

私は、ページの上部にElasticSearch検索バーを持っている、と私はトラブルのバックエンドに適切なリクエストを送信した、とレールが戻って検索要求を処理するために終了できるようにしています。

私たちは何の場所の近くに、今SPAとしてこれを持って準備ができていないが、私はparamsを移入する得るように見える傾けます。

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 

import {asyncContainer, Typeahead} from 'react-bootstrap-typeahead'; 

const AsyncTypeahead = asyncContainer(Typeahead); 

class SearchBar extends Component { 


    constructor(props) { 
     super(props) 
     this.state = { 
      options: ['Please Type Your Query'], 
      searchPath: '/error_code/search', 
      selected: [""], 
     } 

     this.handleSubmit = this.handleSubmit.bind(this); 
     this.handleChange = this.handleChange.bind(this); 
    } 

    searchErrorCodes(term) { 
     fetch(`/error_code/auto?query=${term}`) 
      .then(resp => resp.json()) 
      .then(json => this.setState({options: json})) 
    } 


    handleChange(error_code_name) { 
     let newValue = error_code_name 

     this.setState({ 
      selected: newValue 
     }); 

     this.setState({ 
      searchPath: `/error_code/search?error_code=${this.state.selected}`, 
     }); 


     console.log(`This is the new searchPath is ${this.state.searchPath}`); 
    } 

    handleSubmit(e) { 
     alert(`submitted: ${this.state.selected}`); 
     // event.preventDefault(); 
    } 


    render() { 

     return (
      <div> 
       <form ref="form" 
         action={this.state.searchPath} 
         acceptCharset="UTF-8" 
         method="get" 
         onSubmit={e => this.handleSubmit(e)} 
       > 
        <AsyncTypeahead 
         onSearch={term => this.searchErrorCodes(term)} 
         options={this.state.options} 
         className="search" 
         onClick={e => this.handleSubmit(e)} 
         selected={this.state.selected} 
         onChange={e => this.handleChange(e)} 
        /> 
        <button 
         action={this.state.searchPath} 
         acceptCharset="UTF-8" 
         method="get" 
         type="submit" 
         className="btn btn-sm btn-search"> 
         <i className="fa fa-search"></i> 
        </button> 
       </form> 
      </div> 
     ) 
    } 
} 

ReactDOM.render(<SearchBar/>, document.querySelector('.search-bar')); 

すべてが正しくレンダリングされますが、入力がコントローラに正しく送信されていません。

Answer 1

setStateは本質的に非同期であり、複数のsetStateコールは短い順序でコールするとバッチ更新が行われる可能性があります。最後の更新が勝つことを意味します。 2番目のsetStateコールが最初のコールをオーバーライドしています。

コンポーネントを更新するための即時のコマンドではなく、setState（）をリクエストと考えてください。知覚されたパフォーマンスを向上させるために、Reactはそれを遅延させてから、一回のパスでいくつかのコンポーネントを更新します。 Reactは、状態の変更がすぐに適用されることを保証するものではありません。あなたが以前の状態や小道具から任意の計算を行っていない...あなたは、次のおSETSTATE呼び出しを変更する必要があります考慮

：

this.setState({ 
    selected: newValue, 
    searchPath: `/error_code/search?error_code=${newValue}` 
}); 

ます。またupdater用としての機能を使用することができますsetState(updater, [callback]) 新しい状態を計算するために前の状態または小道具が必要な場合。

this.setState((prevState, props) => { 
    return {counter: prevState.counter + props.step}; 
}); 

prevState及び更新機能によって受信された小道具の両方が最新であることが保証されます。アップデータの出力はprevStateと浅くマージされます。余談として

：Why JSX props should not use arrow functionsを見てください。インラインで使用することはかなり有害です。