javascript - react-table globalFilter 但带有空格

Question

我正在使用 react-table 和 globalFilter 来设置搜索框。我希望能够搜索名字和姓氏。问题是，当我点击空格按钮时，表格不显示任何数据。我尝试使用正则表达式从值状态中删除空格，但没有任何运气......

这是我下面的组件

/* eslint-disable react/prop-types */
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useState } from 'react';
import { FormControl, InputGroup } from 'react-bootstrap';
import { useAsyncDebounce } from 'react-table';

const AdvanceTableSearchBox = ({
  globalFilter,
  setGlobalFilter,
  placeholder = 'Search...'
}) => {
  const [value, setValue] = useState(globalFilter);
  console.log(globalFilter)

  const onChange = useAsyncDebounce(value => {
    setGlobalFilter(value || undefined);
  }, 200);

  return (
    <InputGroup className="position-relative">
      <FormControl
        value={value || ''}
        onChange={({ target: { value } }) => { 
          // tried running regex here to remove whitespace but logging value shows spaces still...

          setValue(value);
          onChange(value);
        }}
        size="md"
        id="search"
        placeholder={placeholder}
        type="search"
        className="shadow-none"
      />
      <InputGroup.Text className="bg-transparent">
        <FontAwesomeIcon icon="search" className="fs--1 text-600" />
      </InputGroup.Text>
    </InputGroup>
  );
};

export default AdvanceTableSearchBox;