按值过滤对象 - Redux答案

【问题标题】：Filter object by value - Redux按值过滤对象 - Redux
【发布时间】：2017-06-27 23:58:04
【问题描述】：

我试图弄清楚 redux，但我被卡住了。我在标题部分和正文部分中有一个输入，我有一个组件从父级接收数据并将它们呈现为列表项。到现在为止还挺好。

我已经连接了我的输入搜索文本，以便在每次按键时触发一个 redux 操作。

我的动作文件

export const jobsFilterDisplay = (jobsList, filterValue) => async dispatch => {
    if (!filterValue){
        console.log("you should call fetch all again");
        console.log(filterValue);
        jobsFetchAll();
    } else {
        console.log("original list");
        console.log(jobsList); // list of jobs - original and unfiltered
        console.log(typeof jobsList); // returns object
        console.log("filter value"); // 
        console.log(filterValue); // my search text input value
        //
        // I think this is where I am supposed to filter the original list 
        // and dispatch an event with the filtered object as the payload
        // in my reducer, I will assign the payload to my list 
        // my list component should update automatically and render updated list
        // dispatch({ type: JOBS_LIST_FILTERED, payload: filterValue }); 
    }
}

我希望能够按客户名称或任何属性进行搜索。每当我尝试_.filter 或类似的东西时，我总是以not a function 或undefined 结束，而且我已经尝试了很长时间。

我的 json 示例 - 它的一部分

{"jobs":[{"id":1,"ticket":{"number":121,"quote":12321,"tech":"Tech 1","date":"06-22-2017","status":1},"customer":{"name":"John","address":"USA"}},{"id":2,"ticket":{"number":1231231,"quote":21123,"tech":"Tech 4","date":"06-22-2017","status":2},"customer":{"name":"Doe","address":"CANADA"}}]}

感谢任何帮助。谢谢！

【问题讨论】：

标签： javascript object react-native filter redux

【解决方案1】：

您可以为此使用 Array.prototype.filter()。您目前使用的是 lodash 吗？这也是可能的。但我推荐 Array.prototype.filter() 方法。以下是你可以做到的。

const payload = 
  [{"id":1,"ticket":{"number":121,"quote":12321,"tech":"Tech 1","date":"06-22-2017","status":1}, "customer":{"name":"John","address":"USA"}},
{"id":2,"ticket":{"number":1231231,"quote":21123,"tech":"Tech 4","date":"06-22-2017","status":2},"customer":{"name":"Doe","address":"CANADA"}}]


  function filterByCustomerName(customerName, payload) {
    return payload.filter(job => job.customer.name === customerName);
  }

  const job = filterByCustomerName('Doe', payload);
  console.log(job);

无论如何，如果您真的需要使用 lodash，请确保您像这样导入它。然后使用 lodash 库中的过滤器。但我仍然认为你没有任何合理的理由去做。

import _ from 'lodash';
function fetJobByCustomer(customerName, payload) {
     return _.filter(payload, job => job.customer.name === customerName);
  });
}

希望这会有所帮助。快乐编码！

【讨论】：