Question

我正在尝试用lodash过滤一些数据。

到目前为止，我所拥有的仅按属性name过滤数据。并且仅在键入整个短语时才返回结果。就像如果键name的值为Marcos Alonso，而您只在搜索框中键入Marcos一样，它不会返回任何内容。这也是我要实现的东西。要返回与搜索框中的值匹配的任何值。

数据数组名为passengersData，它看起来像这样（passengersData来自Redux存储）：

[
 {
  "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
 },
 ...
]

这是组件：

// imports

const PassengerCardBasedOnRoute = ({
  navigationStore,
  passengersData,
  popupsModalsActionHandler,
  searchParam,
}) => {
  const filterByDropOffTimestamp = data =>
    filter(data, ['dropofftimestamp', null]);

  const componentToRenderBasedOnParams = info => (
    <PassengersInfo
      key={info.id}
      id={info.id}
      cardinalpoint={info.cardinalpoint}
      name={info.name}
      address={info.address}
      datetime={info.timestamp}
      searchParam={searchParam}
      callModal={popupsModalsActionHandler}
    />
  );

  return (
    <>
      <View>
        {passengersData && !searchParam.length && 
         filter(filterByDropOffTimestamp(passengersData), [
              'name',
              searchParam,
            ]).map(info => componentToRenderBasedOnParams(info))
         }
      </View>
    </>
  );
};

export default compose(
  connect(
    store => ({
      passengersData: store.homeScreen.passengersData,
      searchParam: store.homeScreen.searchParam,
    }),
  ),
)(PassengerCardBasedOnRoute);

在这种情况下，我该怎么做才能正确过滤数据？

Answer 1

您可以过滤出数组中具有dropofftimestamp值null并具有包含搜索字符串的值的属性的每个对象。

示例

class PassengerCardBasedOnRoute extends React.Component {
  state = {
    passengersData: [
      {
        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
      }
    ],
    searchParam: ""
  };

  onChange = e => {
    this.setState({ searchParam: e.target.value });
  };

  render() {
    const { passengersData, searchParam } = this.state;
    const search = searchParam.toLowerCase();
    const filteredData = passengersData.filter(obj =>
      obj.dropofftimestamp === null && Object.keys(obj).some(key =>
        String(obj[key])
          .toLowerCase()
          .includes(search)
      )
    );

    return (
      <div>
        <input value={searchParam} onChange={this.onChange} />
        {filteredData.map(obj => (
          <div key={obj.id}>{JSON.stringify(obj)}</div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<PassengerCardBasedOnRoute />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

您需要使用Lodash吗？

AfterUpdate

如何通过对象数组中的任何属性过滤数据？

2 个答案: