React - 搜索和过滤数据集

Question

我有一个从快速服务器获取数据的反应应用程序。提取很好，数据显示正确，并且当用户输入与数据集中的某些内容匹配时，搜索功能正常运行。但是，如果用户随后删除了他们的输入，则数据集将不会返回到以前的状态，而是强制用户进行硬刷新。

我将如何解决这个问题，以便当用户删除输入（从“james”到“”）时，页面会过滤回所有数据？

function SearchForm({ data, setData }) {


  
  /*TRACK USER INPUT INTO SEARCH BOX*/
  const [searchValue, setSearchValue] = useState("");

  /*FRONT END: FILTER THROUH DATA TO FIND MATCHES TO SEARCH VALUE*/
  const searchVehicles = (data, searchValue) => {
    const searchedValue = searchValue.toUpperCase();
    const result = data.filter(
      (currenttable) =>
        currenttable.last_name.toUpperCase().includes(searchedValue) ||
        currenttable.first_name.toUpperCase().includes(searchedValue) ||
        currenttable.store.toUpperCase().includes(searchedValue)
    );

    if (searchValue) {
      setData(result);
      console.log(result);
    } else {
      setData(data)
    }
  };

  /*CALL THE FUNCTION WHEN INPUT IS ENETERED*/
  const handleChange = (event) => {
    setSearchValue(event.target.value);
    searchVehicles(data, event.target.value);
    console.log(searchValue)
  };

  /*RESET THE SEARCH BAR AND RENDER ALL DATA */
  const handleReset = () => {
    setSearchValue("");
  };

  /*OUTPUT */

  return (
    <form>
      <label htmlFor="search">Search: </label>
      <input
        className="search-applicant"
        type="text"
        name="search"
        placeholder="Search applicant or store"
        onChange={event => handleChange(event)}
        value={searchValue}
      ></input>
      <button className="search-btn" onClick={handleReset}>
        Refresh
      </button>
    </form>
  );
}

export default SearchForm;

Answer 1

知道了！因此，每次过滤时，您都在修改原始数据。这就是发生的事情。

起初你的组件有data，（例如）现在是["a", "b", "c"]。然后你输入“a”，它会调用setData，将状态更改为[“a”]。但是您正在修改原始数据，所以现在数据中只有“a”，没有其他内容！

你可以改变你的组件而不改变原始数据，直接在你渲染的元素中过滤

function SearchForm({ data }) {


/*TRACK USER INPUT INTO SEARCH BOX*/
  const [searchValue, setSearchValue] = useState("");

  /*CALL THE FUNCTION WHEN INPUT IS ENETERED*/
  const handleChange = (event) => {
    setSearchValue(event.target.value);
  };

  /*RESET THE SEARCH BAR AND RENDER ALL DATA */
  const handleReset = () => {
    setSearchValue("");
  };

  /*OUTPUT */
  return (
    <form>
      <label htmlFor="search">Search: </label>
      <input
        className="search-applicant"
        type="text"
        name="search"
        placeholder="Search applicant or store"
        onChange={event => handleChange(event)}
        value={searchValue}
      />
      {data
        .filter(({ first_name}) => first_name.includes(searchValue)) /* or whatver filter you want*/
        .map(({first_name, last_name, store}) => <div key={store}>{`${first_name} ${last_name} => ${store}`}</div>)
      }
      <button className="search-btn" onClick={handleReset}>
        Refresh
      </button>
    </form>
  );
}

或者您可以创建它的本地副本（例如const [filteredData, setFilteredData] = useState(data)，并且您将filteredData 设置为data 并应用过滤器，但您永远不会改变数据）。

See Example Here