ReactJS中基于状态的条件列表

Question

我对 React JS 很陌生，我只是想知道如何根据我的 prop 状态过滤组件呈现的内容。

所以我有以下组件允许我选择某个品牌并将其存储为道具：

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 属性并有条件地决定我的组件应呈现什么时遇到问题。

这是我的详细信息组件：

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;

如您所见，它构建了一个带有数据的 HTML 容器。我还添加了一个条件语句（GitHub 上的 react-if）来尝试渲染与我的 VehicleSelect 组件中选择的选项匹配的数据，但这似乎不起作用。我收到以下错误：

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.

这是我的组件，它迭代我的 VehicleDetail 组件并向它提供数据：

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 组件中的所有数据。

谢谢

Answer 1

您不能在 Details 组件中使用 this.state.brandSelect 由于您的详细信息组件已设置，并且品牌选择也存在于父组件中