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组件具有来自用户提交表单并从reducer（getCarResult）获取这些值的操作（showResultofCar）中的汽车值？

更新

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

因此，您的reducer必须有另一个动作处理器来提供过滤结果。

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

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

1 个答案: