Javascript 如何根据搜索参数获取新的数据数组？

我从API调用中请求了一些数据，我需要对这些数据进行过滤

我正在与Redux合作，而不是与当地政府合作

以下是我的行动：

import ActionTypes from '../constants/ActionTypes';


export const passengersDataAction = passengersData => ({
  type: ActionTypes.PASSENGERS_DATA,
  // This is the array of objects that I need to search through
  payload: { passengersData }, 
});

export const searchParamAction = searchParam => ({
  type: ActionTypes.SEARCH_PARAM,
  // This is the param that I need to send to passengersData
  // in order to get a new array of objects
  payload: { searchParam },
});

这是我的减速机：

import createReducer from '../../../redux/createReducer';
import ActionTypes from '../constants/ActionTypes';

const initialState = {
  passengersData: [],
  searchParam: '',
};

const handlers = {
  [ActionTypes.PASSENGERS_DATA](state, action) {
    return {
      ...state,
      passengersData: action.payload.passengersData,
    };
  },

  [ActionTypes.SEARCH_PARAM](state, action) {
    return {
      ...state,
      searchParam: action.payload.searchParam,
    };
  },
};

export default createReducer(initialState, handlers);

上面是减速器

我想要的是基于

searchParam

的值返回一个新的对象数组

大概是这样的：

  [ActionTypes.SEARCH_PARAM](state, action) {
    return {
      ...state,
      passengersData://HERE GOES THE NEW ARRAY BASED ON WHAT searchParam RETURNS,
      searchParam: action.payload.searchParam,
    };
  },

在组件中，我正在执行以下操作：

  <View>
    <TextInput
      style={PassengersStyles.SearchBox}
      // searchParamActionHandler sends the input value to the update the reducer
      onChangeText={text => searchParamActionHandler(text)}
      value={searchParam}
      placeholder="Search..."
    />
  </View>
  <Text>{searchParam}</Text>
  <PassengerCardBasedOnRoute searchParam={searchParam} />

顺便说一句，这就是对象数组的外观：

[
 {
  "id": 3,
  "name": "Marcos Alonso",
  "address": "Sabana",
  "phone": "712321222",
  "pickup": 0,
  "cardinalpoint": "N",
  "latitude": "9.93683450",
  "longitude": "-84.10991830",
  "timestamp": "2019-02-19 21:23:46",
  "dropofftimestamp": null,
  "pickuptimestamp": null,
  "deleted": null,
  "driver": 1
 },
 ...
]

那么，如何返回新数组来呈现搜索条件呢？

更新了：

如果我能很好地理解您的需求，您应该这样做：我只需要做一点更改来映射按名称|地址过滤的数据

{
    passengersData.filter(item => item['name'] === this.props.searchParam || item['address'] === this.props.searchParam).map(info => (
        <PassengersInfo
          key={info.id}
          searchParam={this.props.searchParam}
          cardinalpoint={info.cardinalpoint}
          name={info.name}
          address={info.address}
          datetime={info.timestamp}
        />
 }

然后映射PassengersDataFilted：

      {passengersDataFiltred.map(info => (
        <PassengersInfo
          key={info.id}
          searchParam={this.props.searchParam}
          cardinalpoint={info.cardinalpoint}
          name={info.name}
          address={info.address}
          datetime={info.timestamp}
        />
       }

{passengersdatafilted.map（信息=>(
}

---

如果这不是您想要的，请给我您的反馈？

在“搜索参数”操作类型的缩减器中，您可以从状态创建“PassengerData”的副本，并根据需要修改该副本

const initialState = {
  passengersData: [],
  searchParam: '',
  searchedData: []
};

[ActionTypes.SEARCH_PARAM](state, action) {
//In filter you can add your own logic to get the data
const searchedData = state.passengersData.filter((passenger) => passenger.name === action.payload.searchParam);

   return {
     ...state,
     searchedData,
     searchParam: action.payload.searchParam,
   };
},

---

仅供参考，这将用“searchedData”替换“passengerData”。如果你想保留原始的“passengerData”，那么你可以在redux存储中创建一个新状态，并从reducer中返回它。

是通过

名称

或

地址

进行搜索还是什么？您好@codekaizer，是的。通过名称。嗯，是的，实际上它正在发生。我能做些什么这样做吗？如果

passengersData

不存在，搜索功能将不起作用。@我刚刚更新了答案，为搜索的数据添加了新的redux状态。我需要查看您的代码（如果可能的话）为了更好地理解您的需求！嗯，所有关于此功能的代码都是我发布的。无论如何，我需要像@Hitesh Chaudhari Answer这样做“searchParam”是什么意思？在您的reducer中，是searchParam的值是对象的属性之一（id、名称、地址、驱动程序）还是“searchParam”可以是例如“address”它的值是地址的值？

searchParam

只是输入的字符串。就像在搜索框中键入的任何内容一样，这就是

searchParam

。

      {passengersDataFiltred.map(info => (
        <PassengersInfo
          key={info.id}
          searchParam={this.props.searchParam}
          cardinalpoint={info.cardinalpoint}
          name={info.name}
          address={info.address}
          datetime={info.timestamp}
        />
       }

const initialState = {
  passengersData: [],
  searchParam: '',
  searchedData: []
};

[ActionTypes.SEARCH_PARAM](state, action) {
//In filter you can add your own logic to get the data
const searchedData = state.passengersData.filter((passenger) => passenger.name === action.payload.searchParam);

   return {
     ...state,
     searchedData,
     searchParam: action.payload.searchParam,
   };
},