如何過濾數組中的多個對象？

Question

這是我的陣列

const [arr, setArr] = useState([
  { id: 1, name: 'John', age: 40},
  { id: 2, name: 'Jane', age: 50 },
]);

我用過filter來搜索，

{arr.filter(product => product.name.includes(value)).map((row) => (
  <TableRow>
    <TableCell align="center">{row.id}</TableCell>
    <TableCell align="center">{row.name}</TableCell>
    <TableCell align="center">{row.age}</TableCell>
  </TableRow> 
))}

現在我只能按name搜索，我想同時按name或age搜索。

Answer 1

您可以使用邏輯 OR 運算符來做到這一點，例如

let age = 40;
arr.filter(product => product.name.includes(value) || product.age == age)

Answer 2

const filteredArr = arr.filter(product => product.name.includes(value) || product.age === value);
{filteredArr.map((row) => (
 <TableRow>
    <TableCell align="center">{row.id}</TableCell>
    <TableCell align="center">{row.name}</TableCell>
    <TableCell align="center">{row.age}</TableCell>
 </TableRow> 
))}

Answer 3

希望對你有幫助

import React, { useState } from "react";
    
    function Data() {
      const [arr, setArr] = useState([
        { id: 1, name: "John", age: 40 },
        { id: 2, name: "Jane", age: 50 },
      ]);
    
      const [userName, setName] = useState("");
      const [age, setAge] = useState(0);
    
      let filtered = arr.filter(
        (name) => name.name === userName || name.age === Number(age)
      );
    
      return (
        <div>
          <input
            placeholder="age"
            onChange={(e) => {
              setAge(e.target.value);
            }}
            value={age}
          />
          <input
            placeholder="name"
            onChange={(e) => {
              setName(e.target.value);
            }}
            value={userName}
          />
    
          {filtered.map((row) => (
            <>
              <h1>{row.id}</h1>
              <h1>{row.name}</h1>
              <h1>{row.age}</h1>
            </>
          ))}
        </div>
      );
    }
    
    export default Data;