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道具并有条件地决定我的组件应该渲染时会遇到问题。

这是我的详细信息组件：

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容器。我还添加了一个条件语句（react-if在GitHub上）来尝试渲染与我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 prop等于""，那么我想渲染我VehicleList组件中映射的所有数据。

由于

Answer 1

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

基于状态的ReactJS中的条件列表

1 个答案: