在搜索结果页面显示筛选结果

Question

我的应用程序的基本功能是主页中有一个搜索框。用户填写表单并提交时，用户将被定向到结果页面，其中将显示搜索结果以及过滤选项。现在，当用户使用过滤选项并将价格范围设置为最低 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 组件具有来自用户提交表单的操作 (showResultofCar) 的汽车值并从 reducer(getCarResult) 获取这些值？

更新

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;
  }
}

Answer 1

所以你的减速器必须有另一个动作处理器来提供过滤结果。

我正在为 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;
  }
}

在搜索结果页面显示筛选结果

show filtered result in search result page

javascript

reactjs

redux

react-redux