在搜索结果页面中显示过滤的结果

debugcn 发表于 Dev

宁静

我的应用程序的基本功能是在主页上有一个搜索框。用户填写表单，并在提交时将用户定向到结果页面，在该页面中将显示搜索结果以及过滤选项。现在，当用户使用过滤选项并将价格范围设置为最小10欧元和最大20欧元时，用户应该看到的结果在（10到20）欧元之间，而不是所有结果。

我所做的是，我显示了用户搜索的结果。我也写了一个过滤逻辑，但是现在空白如何用过滤后的结果更新结果。

过滤的逻辑将是这样的（它只是用于显示我的想法的伪代码）

function carFilterFromPrice(price) {
  return cars.filter(function (car) {
    return car.price > price.min && car.price < price.max;
  });
}

this.props.carFilterFromPrice(price);

car-result.js（结果页面的父组件）

class ResultLayout extends Component {
  render() {
  const { Origen, Destino, daterange } = this.props.carValues;
  const { carResult } = this.props;
    return (
      <div className="container-fluid">
        <CarResultFilter
          origen={Origen}
          destino={Destino}
          daterange={daterange}
        />
        <CarResult
          origen={Origen}
          destino={Destino}
        />
      </div>
    );
  }
}

const mapStateToProps = state => {
    console.log('state', state);
    const carValues = selector(state, 'Origen', 'Destino', 'daterange');
    return {
        carValues,
        carResult: state.getCarResult
    };
  };

car-result-filter.js（过滤选项是简单的输入游侠）

class CarResultFilter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      prices: { min: 0, max: 100 },
    };
  }

  handleValuesChange(component, values1) {
    this.setState({ prices });
    this.props.carFilterFromPrice(this.state.prices);
  }

  render() {
    const { origen, daterange } = this.props;
    return (
      <div className="car-result-filter">
        <div className="container-fluid">
          <div className="row">
            <div className="col-xs-12 col-sm-12 col-md-3">
              <InputRange
                maxValue={100}
                minValue={0}
                value={this.state.prices}
                onChange={this.handleValuesChange.bind(this)}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

car-result.js（我想在过滤时更新）

function renderCarList(cars, cityOrigen, cityDestino) {
  if (cars.length > 0) {
    return _.map(cars, (car) => (
      <CarResultList
        key={car.provider_id}
        car={car}
        cityOrigen={cityOrigen}
        cityDestino={cityDestino}
      />
    ));
  }
  return <p> No Car to show </p>;
}

const CarResultList = ({ car, cityOrigen, cityDestino }) =>
    <div className="car-result-list">
      <Row className="show-grid" style={{ marginTop: 10, marginBottom: 10 }}>
        <Col xs={12} sm={12} md={6}>
          <img
            src={car.photo ? car.photo : CarImage}
            className="img-responsive car-img"
            style={{ width: 200, height: 200 }}
            alt={car.provider}
          />
        </Col>
        <Col xs={12} sm={12} md={6}>
            <h3>{car.car}</h3>
            <p className="sub">{cityOrigen}-{cityDestino}</p>
        </Col>
      </Row>
  </div>;

class CarResult extends Component {
  render() {
    const { carResult, origen, destino } = this.props;
    const carResultList = renderCarList(carResult.cars, cityOrigen, cityDestino);
    if (!carResult.fetching) {
    return (
      <div>
        Hemos encontrado {carResultList.length} ofertas para ti.
        <div className="car-result-container">
          <Grid>
                    {carResultList}
          </Grid>
        </div>
      </div>
    );
  }
  return (
    <div>wait we are loading content for you....</div>
  );
  }
}

我如何使用提供的新过滤值更新结果页面，因为CarResult组件具有用户提交表单并从reducer（getCarResult）获取这些值的action（showResultofCar）中的car值？

更新

const initialState = {
  fetching: false,
  fetched: true,
  cars: [],
  error: null
};

export function getCarResult(state = initialState, action) {
  switch (action.type) {
    case 'CAR_FETCH_START':
      return { ...state, fetching: true };
    case 'CAR_FETCH_SUCCESS':
      return { ...state, fetched: true, fetching: false, cars: action.payload };
    case 'CAR_FETCH_FAILURE':
      return { ...state, error: action.payload };
    default:
      return state;
  }
}

乔西·巴布·阿拉哈（Jyothi Babu Araja）

因此，减速器必须具有另一个动作处理器才能给出过滤后的结果。

我使用全局状态cars，其得到由水合CARS_FETCH_SUCCESS。并根据进一步过滤汽车price。

创建您自己的操作以过滤如下内容

function getFilteredResults(price){
   return(dispatch, getState){
     return dispatch(
       type: "CARS_FETCH_WITH_FILTERS",
       payload: price //price from container
     )
   }
}

这是示例实现

let cars = [];
const initialState = {
  fetching: false,
  fetched: true,
  cars: [],
  error: null
};

function carFilterFromPrice(price) {
  return cars.filter(function (car) { //users global cars object to filter
    return car.price > price.min && car.price < price.max;
  });
}

export function getCarResult(state = initialState, action) {
  switch (action.type) {
    case 'CAR_FETCH_START':
      return { ...state, fetching: true };
    case 'CAR_FETCH_SUCCESS':
      cars = action.payload; //storing all cars in global state to reuse them for filtering
      return { ...state, fetched: true, fetching: false, cars: action.payload };
    case 'CAR_FETCH_WITH_FILTERS': //you filter action
      return { ...state, filtered: true, cars: carFilterFromPrice(action.payload.price) }; //send price in payload to filter
    case 'CAR_FETCH_FAILURE':
      return { ...state, error: action.payload };
    default:
      return state;
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。