Javascript 在搜索表单下方显示上次搜索的项目

我有一个使用redux表单开发的搜索表单。我已经使用路由器路由到表单。在我从搜索表单提交数据并返回到同一表单之后，每当用户单击SearchPlaces输入框时，我希望显示以前搜索过的数据列表。我怎样才能做到

像照片上那样

这是我的代码

const Banner = (props) => (
  <Router>
    <div className="container banner">
      <ServiceType />
          <div className="row">
            <Match exactly pattern="/" location={props.location} component={Apartamentos} />
            <Match pattern="/apartamentos" component={Apartamentos} />
            <Match pattern="/coche" component={Coche} />
            <Match pattern="/experiencias" component={Experiencias} />
          </div>
    </div>
  </Router>
);


const renderGeoSuggestField = ({
  input,
  location
}) => (
  <Geosuggest
    fixtures={fixtures}
    initialValue={input.value.label}
    inputClassName="form-control destino"
    onChange={(value) => input.onChange(value)}
    onSuggestSelect={(value) => input.onChange(value)}
    radius="20"
  />
);

const renderDateRangePicker = ({
  input,
  focusedInput,
  onFocusChange,
}) => (
  <DateRangePicker
    onDatesChange={(start, end) => input.onChange(start, end)}
    startDate={(input.value && input.value.startDate) || null}
    endDate={(input.value && input.value.endDate) || null}
    minimumNights={0}
  />
);

class ServiceType extends Component {
render() {
  return(
    div className="col-xs-12 col-sm-12 col-md-4 serviceImg">
      <Link to="/apartamentos">
        <img
          src={imageUrl}
          alt="apartamentos"
          className="img-responsive"
        />
        <h4>APARTAMENTOS</h4>
      </Link>
    </div>
  );
}
}


class Apartamentos extends Component {
  render() {
    const { focusedInput } = this.state;
    return (
      <div className="form-box text-center">
        <div className="container">
          <form className="form-inline">
            <div className="form-group">
              <Field
                name='geoSuggest'
                component={renderGeoSuggestField}
                onChange={(value) => this.onChange(value)}
                onSuggestSelect={(suggest) => this.onSuggestSelect(suggest)}
                location={new google.maps.LatLng(53.558572, 9.9278215)}
              />
            </div>
            <div className="form-group">
              <Field
                name="daterange"
                onFocusChange={this.onFocusChange}
                focusedInput={focusedInput}
                component={renderDateRangePicker}
              />
            </div>
            <div className="form-group">
              <Field
                name="persona"
                component="select"
              >
                <option>1 persona</option>
                <option>2 personas</option>
              </Field>
            </div>
            <button type="submit" className="btn btn-default buscar">BUSCAR</button>
          </form>
        </div>

      </div>
    );
  }
}

const ApartmentForm = reduxForm({
  form: 'ApartmentForm',
  destroyOnUnmount: false,
})(Apartamentos);

const横幅=（道具）=>(
);
const rendergosuggestfield=({
输入，
位置
}) => (
input.onChange（值）}
onSuggestSelect={（值）=>input.onChange（值）}
半径=“20”
/>
);
常量RenderDaterRangePicker=({
输入，
聚焦输入，
onFocusChange，
}) => (
input.onChange（开始，结束）}
startDate={（input.value&&input.value.startDate）| | null}
endDate={（input.value&&input.value.endDate）| | null}
最小夜数={0}
/>
);
类ServiceType扩展组件{
render（）{
返回(
div className=“col-xs-12 col-sm-12 col-md-4 serviceImg”>
公寓
);
}
}
class Apartmentos扩展组件{
render（）{
const{focusedInput}=this.state；
返回(
this.onChange（值）}
onSuggestSelect={（建议）=>this.onSuggestSelect（建议）}
location={new google.maps.LatLng（53.558572,9.9278215）}
/>
1个人
2人物角色
客车
);
}
}
const ApartmentForm=reduxForm({
表格：'公寓表格'，
DestroyOnMont:false，
})（公寓）；

您应该做的是维护一个名为say

previousSearches的
redux
状态变量，该变量初始化为空数组。每次单击
Submit
时，都会将表单数据推送到该
previousSearches
数组中。因此，当您单击“下一步输入”按钮时，只需显示
previousSearches
数组中的所有信息（这是一个
redux
变量，可以作为
prop
访问）

我猜是这样的

case 'ADD_PREVIOUS_SEARCH':
            return Object.assign({}, state, {
                previousSearches: state.previousSearches.push(action.search)
            })

然后您可以通过
this.props.previousSearches
访问
previousSearches
，您应该做的是维护一个名为say
previousSearches
的状态变量，该变量初始化为空数组。每次单击
Submit
时，都会将表单数据推送到该
previousSearches
数组中。因此，当您单击“下一步输入”按钮时，只需显示
previousSearches
数组中的所有信息（这是一个
redux
变量，可以作为
prop
访问）

我猜是这样的

case 'ADD_PREVIOUS_SEARCH':
            return Object.assign({}, state, {
                previousSearches: state.previousSearches.push(action.search)
            })

然后您可以通过
this.props.previousSearches
访问
previousSearches
，这意味着我应该分派onSubmit操作并创建一个存储推送表单数据的缩减器，对吗？是的。您可以将表单数据作为
操作
参数发送，并将其推送到
reducer
中的数组中。修改了答案。这意味着我应该分派onSubmit操作并创建一个存储推送表单数据的缩减器，对吗？是的。您可以将表单数据作为
操作
参数发送，并将其推送到
reducer
中的数组中。修改了答案。