状態に基づくReactJSの条件付きリスト

Question

私はReact JSの新機能を使用しています。自分のコンポーネントの状態に基づいてコンポーネントのレンダリングをどのようにフィルタリングすることができるのだろうかと思っています。

だから私は、私は特定のブランドを選択して、小道具としてそれを保存することができ、次のコンポーネントがあります。

var React = require('react'); 
import Select from 'react-select'; 

class VehicleSelect extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = { brandSelect: ""}; 

    } 

    _onChange(value) { 
     //console.log(value) - just to see what we recive from <Select /> 
     this.setState({brandSelect: value},() => { 
      console.log(this.state.brandSelect); 
     }); 
    } 

    render() { 
    var options = [ 
     { value: 'Volkswagen', label: 'Volkswagen' }, 
     { value: 'SEAT', label: 'SEAT' }, 
     { value: 'SKODA', label: 'SKODA' } 
    ]; 


    return (
     <Select 
      name="form-field-name" 
      value={this.state.brandSelect} 
      options={options} 
      placeholder="Select a brand" 
      searchable={false} 
      onChange={this._onChange.bind(this)} 
     /> 
    ) 
    } 
}; 

// Export our component 
export default VehicleSelect; 

予想通りこのコンポーネントは、それがbrandSelect小道具を取るに来るときしかし、私は問題を抱えています動作します私のコンポーネントがレンダリングすべきものを条件付きで決定します。あなたはそれがデータをHTMLコンテナを構築見ることができるように

var React = require('react'); 
import { If, Then, Else } from 'react-if'; 
import VehicleSelect from './vehicle-select.js'; 
// Vehicle Description Component 

const VehicleDetail = (props) => { 
    return (
    <If condition={ this.state.brandSelect === props.vehicle.brand.name }> 
    <div className="col-flex-md-3 col-flex-sm-4 col-flex-xs-6 col-flex-media-query"> 
     <div className="vehicle-container"> 
     <img src={"https://s3-eu-west-1.amazonaws.com/pulman-vw-images/uploads/images/thumbnails/" + props.vehicle.offers[0].image.name} /> 
     <h4 className="vehicle-title"> 
      {props.vehicle.model.name} 
     </h4> 
     <div className="row-flex"> 
      <div className="col-flex-xs-12 btn-container"> 
      <a href={"http://pulman" + props.vehicle.brand.name + ".co.uk/new/cars/" + props.vehicle.slug} target="_blank" className="learn-more-btn">Learn More</a> 
      </div> 
     </div> 
     </div> 
    </div> 
    </If> 

); 
}; 

// Export our component 
export default VehicleDetail; 

：

は、ここに私の詳細コンポーネントです。私はまた、VehicleSelectコンポーネントで選択されたオプションに一致するデータを試してレンダリングするために条件文（GitHubの場合は反応）を追加しましたが、これはうまくいかないようです。私のコンポーネントはそれに私のVehicleDetail部品や消耗品のデータを反復処理が

ここ

Warning: There is an internal error in the React performance measurement code. Did not expect componentDidUpdate timer to start while render timer is still in progress for another instance.

をされています：

var React = require('react'); 
// Vehicle List Componen 
import VehicleDetail from './vehicle-detail.js'; 

// Create our component 
const VehicleList = (props) => { 
    // Just add props.vehicle to access API data instead of static 
    const RenderedVehicles = props.vehicles.map(vehicle => 
    <VehicleDetail key={vehicle.slug} vehicle={vehicle} /> 
); 

    return (
    <div className="row-flex center-xs"> 
     {RenderedVehicles} 
    </div> 
); 
}; 

// Export our component 
export default VehicleList; 

だから私の質問は、私が間違っているつもりされて、私は次のエラーを取得しますか？私がReactJSを初めて習得したとき、私は選択された状態に基づいてどのようにコンポーネントをレンダリングできるのか不明です。私がしようとしているのは、VehicleSelectコンポーネントのbrandSelect小道具と一致するデータを表示することだけです。 brandSelect小道具が""と等しい場合は、VehicleListコンポーネントにマップされているすべてのデータをレンダリングしたいと思います。あなたの詳細コンポーネントは、セットアップとbrandselectあるので、あなたは詳細コンポーネント でthis.state.brandSelectを使用することはできません

おかげ

Answer 1

は