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} />
PassengerCardBasedOnRoute
是渲染来自的对象数组的组件passengersData
。像这样:
{passengersData.map(info => (
<PassengersInfo
key={info.id}
searchParam={this.props.searchParam}
cardinalpoint={info.cardinalpoint}
name={info.name}
address={info.address}
datetime={info.timestamp}
/>
}
顺便说一句,这就是对象数组的外观:
[
{
"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
},
...
]
那么,我怎样才能返回那个新数组来呈现搜索条件呢?
解决方案
在“SEARCH_PARAM”操作类型的减速器中,您可以从状态创建“passengersData”的副本,并根据需要更改该副本。
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”替换“passesngerData”。如果您想保留原始的“passengerData”,那么您可以在 redux 存储中创建一个新状态并从减速器返回它。
推荐阅读
- c - 如何读取 IIS 模块中的请求发布文件?
- spring-boot - 将 Spring Boot 1.5.10 升级到 2.1.11
- git - 如何将重复的存储库作为来自其他组织的原始存储库的分支
- python-3.x - 当我点击运行按钮时消息是 TypeError: Student() 没有参数
- javascript - 检查对象数组中是否存在值的简单方法?
- html - 使用 CSS 在按钮单击时将元素置于最前面
- javascript - 高阶函数(如 .map())如何在 JavaScript 内部工作?
- node.js - NodeJS 异步函数来创建页面加载器
- django - 带有url参数的Django unquote()
- python - 即使条件为真,带有 else 条件的 For 循环也会运行