Question

我想弄清楚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"}}]}

感谢任何帮助。谢谢！

Answer 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);
  });
}

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

按值过滤对象 - Redux

我的操作文件

我的json示例 - 部分内容

1 个答案: