反応内の値状態の消去

Question

特定の暗号化通貨コインのオブジェクトの配列を保持するapiエンドポイントを使用します。

ユーザーは特定のコインを入力して提出でき、価格を返すことができるフォームを作成しました。そのコインは、API内のオブジェクトの配列内にあるかどうかをチェックします。それが有効であれば、それをコンストラクタのフィルタ結果配列にプッシュします。

私の最初の検索クエリは機能しますが、2番目のクエリ検索を実行して送信ボタンを押すと失敗し、ページをリロードします。

constructor() { 
    super(); 
    this.state = {value: ''}; 
    this.state = {coin: []}; 
    this.state = {items: []}; 
    this.state = {filteredResults: []}; 

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

    handleChange(event) { 
    this.setState({value: event.target.value}); 
    } 

    handleSubmit(event) { 
    let coin = this.state.value; 
    this.findCoin(coin); 
    event.preventDefault(); 
    } 

    findCoin(id) { 
    this.state.items.forEach(function(currency){ 
     if(currency.id === id) { 
     this.state.filteredResults.push(currency) 
     } 
    }, this); 

    this.setState({filteredResults: this.state.filteredResults[0]}); 
    } 

    componentDidMount() { 
    fetch(`https://api.coinmarketcap.com/v1/ticker/`) 
     .then((result)=> { 
     result.json() 
     .then(json => { 
     this.setState({items: json}) 
     }); 
    }); 
    } 

    render() { 
    return (
     <div className="App"> 
     <form onSubmit={this.handleSubmit}> 
      <label> 
      Name: 
      <input type="text" value={this.state.value} onChange={this.handleChange} /> 
      </label> 
      <input type="submit" value="Submit" /> 
     </form> 
     <div> Price: $ {this.state.filteredResults.price_usd} 
     </div> 
     </div> 
    ); 
    } 
} 

Answer 1

この方法における問題：ライン

this.setState({filteredResults: this.state.filteredResults[0]}); 

で

findCoin(id) { 
 
    this.state.items.forEach(function(currency){ 
 
     if(currency.id === id) { 
 
      this.state.filteredResults.push(currency) 
 
     } 
 
    }, this); 
 

 
    this.setState({filteredResults: this.state.filteredResults[0]}); 
 
}

オブジェクトに、オン（配列である）filteredResultsを設定します2番目の行を検索

this.state.filteredResults.push(currency) 

は、filredResultsの文字列にはpushメソッドがないため、エラーが発生します。

event.preventDefault最後の行にhandleSubmitメソッドがあるため、以前のエラーとフォームが送信されているため実行されません。

Answer 2

このメソッドは、Reactの状態チェックを回避する状態を変更しています。

findCoin(id) { 
    this.state.items.forEach(function(currency){ 
     if(currency.id === id) { 
     this.state.filteredResults.push(currency) 
     } 
    }, this); 

    this.setState({filteredResults: this.state.filteredResults[0]}); 
    } 

新しい配列参照できますフィルタ等の方法、使用する：あなたが唯一のこれまでであれば（オブジェクトとしてfilterResultsを宣言し、言及した他のポスターの一つとして、また

const filtered = this.state.items.filter(ccy=> ccy.id === id); 
this.setState({filteredResults: filtered[0]}; 

を1つのフィルタリングされた結果を表示することになります）。

this.state = {filteredResults: {}};