javascript - 使用 React 中的下拉列表过滤来自 API 的数据

Question

我将如何使用下拉列表过滤来自 API 的结果？
我目前有一个像这样的选择标签

  <select value={selectMonthFilter} onChange={e=> setSelectMonthFilter(e.currentTarget.value)}>
    {console.log(selectMonthFilter)}
    <option value="">---</option>
    <option value="">Jan</option>
    <option value="">Feb</option>
    <option value="">Mar</option>
    ...
  </select>

该列表还显示了来自 API 的所有结果

  const [data, setData] = useState([]);

  const [selectMonthFilter, setSelectMonthFilter] = useState(data)

API 返回内容的示例

{
"id": 1,
"first_name": "Bob",
"last_name": "Smith",
"birthdate": "1970-04-19T08:56:27Z",
},

其中 1970 是年份，04 是月份，19 是日期，后面的字符串是时间。
如果用户在下拉列表中选择三月，我将如何实现，它会过滤所有三月生日的人？
我尝试测试以下内容，但似乎没有选择任何内容

  const selectMonths = (selectMonthFilter) => {
    setSelectMonthFilter(selectMonthFilter)
    console.log(selectMonthFilter)
  };

<select value={selectMonthFilter} onChange={event => selectMonths(event.target.value)} >

https://codesandbox.io/s/api-test-c4swl?file=/src/pages/home.jsx

Answer 1

提供与生日日期时间字符串的月份部分匹配的月份选项值。

<label>
  Select Month
  <select
    value={selectMonthFilter}
    onChange={(e) => setSelectMonthFilter(e.currentTarget.value)}
  >
    <option value="">---</option>
    <option value="01">Jan</option>
    <option value="02">Feb</option>
    <option value="03">Mar</option>
    <option value="04">Apr</option>
    <option value="05">May</option>
    <option value="06">Jun</option>
    <option value="07">Jul</option>
    <option value="08">Aug</option>
    <option value="09">Sep</option>
    <option value="10">Oct</option>
    <option value="11">Nov</option>
    <option value="12">Dec</option>
  </select>
</label>

您可以用“T”分割生日以获得日期前缀，然后用“-”分割并取月份部分。

const getMonthValue = (dateTime) =>
  dateTime.toLowerCase().split("t")[0].split("-")[1];

获得月份值后，您可以按与所选月份值匹配的出生日期过滤数据。如果没有要过滤的月份，则返回 true 以包含所有数据。

{data
  .filter(({ birthdate }) =>
    selectMonthFilter
      ? getMonthValue(birthdate) === selectMonthFilter
      : true
  )
  .map((el) => (
    // map your JSX here
  ))}

如果您有更多过滤器，您可以将它们组合在一个 .filter 中打回来。
例子:

{data
  .filter(({ birthdate, first_name, last_name, preferred_name }) =>
    selectMonthFilter || searchNameFilter
      ? (selectMonthFilter &&
          getMonthValue(birthdate) === selectMonthFilter) ||
        (searchNameFilter &&
          [first_name, last_name, preferred_name]
            .join(" ")
            .toLowerCase()
            .includes(searchNameFilter))
      : true
  )
  .map((el) => (
    ...
  ))}

由您决定是否需要满足所有条件(逻辑 AND 所有条件)，或者它们中的任何一个可以匹配(逻辑 OR 所有条件)。