如何在使用 React Hooks 获取数据后实现搜索答案

【问题标题】：How to implement search after data fetch with React Hooks如何在使用 React Hooks 获取数据后实现搜索
【发布时间】：2020-07-05 02:14:08
【问题描述】：

我已经从 API 进行了提取，并且我想添加一个搜索组件，以便能够从提取的数据中搜索单个用户。我需要一些帮助才能正确地做到这一点。感谢您的帮助，我希望我可以理解。在下面你可以看到我做了什么：

DataFethed.js：

import React, { useState, useEffect } from "react";
import axios from "axios";
import Search from "./Search";

function DataFethed() {
  const [searchValue, setSearchValue] = useState("");
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios
      .get(
        "https://gist.githubusercontent.com/benna100/5fd674171ea528d7cd1d504e9bb0ca6f/raw"
      )
      .then(res => {
        console.log(res);
        setUsers(res.data);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  const searchHandler = value => {
    setSearchValue(value);
  };

  let updateUsers = users.filter(item => {
    return item.name.toLowerCase().includes(searchValue);
  }, []);

  return (
    <div className="App">
      <h5>Shift OverViewShift</h5>
      <Search searchHandler={searchHandler} />
      {updateUsers.map((shifts, index) => (
        <DataFethed key={index} props={shifts} />
      ))}
      <ul>
        {users.map(user => (
          <ol key={user.name}>
            <br />
            {user.name} <br />
            {user.start} <br />
            {user.end}
          </ol>
        ))}
      </ul>
    </div>
  );
}

export default DataFetched;

Search.js：

import React from "react";

const Search = ({ searchHandler }) => {
  const handleSearchInputChange = e => {
    searchHandler(e.target.value);
  };

  return (
    <form className="search">
      <input
        onChange={handleSearchInputChange}
        type="text"
        placeholder="Search Name..."
      />
      <i className="fas fa-search" type="submit" value="SEARCH"></i>
    </form>
  );
};

export default Search;

【问题讨论】：

没错，有什么问题？通过查看您的代码，它应该可以工作。 正确地做是什么意思？
谢谢 Jolly，问题是当我运行它时浏览器出现错误，并且搜索字段呈现多次并且无法使用。
再次，在您编写的代码中没有错误。我尝试在 CodeSandBox 中使用您的代码并且它有效：我只更改了您呈现 <ShiftManager> 的行。您能否提供该组件的代码？
shiftManager 是我更改为 DataFetched 的函数的名称，也许这可能是问题所在。你能告诉我你是怎么改变的吗？
好吧，如果您尝试导入不再存在的组件，您肯定会遇到问题。然后，假设您解决了这个问题：您想在 DataFetched 中渲染 DataFetched？

标签： javascript function api react-hooks jsx

【解决方案1】：

由于我们交换了 cmets，您只需要条件渲染。在DataFetched 内部，你应该写下这个return 语句：

return (
  <div className="App">
    <h5>Shift OverViewShift</h5>
    <Search searchHandler={searchHandler} />
    <ul>
      {(searchValue === '' ? users : updateUsers).map(user => (
        <ol key={user.name}>
          <br />
          {user.name} <br />
          {user.start} <br />
          {user.end}
        </ol>
      ))}
    </ul>
  </div>
);

基本上，现在，当searchValue NOT 为空时（意味着您正在搜索），您使用updateUsers 来呈现用户。相反，当searchValue 为空时，您使用users 呈现ALL 用户。
此外，由于users 和updateUsers 中的结构相同，因此可以使用相同的map() 函数：请注意，三元运算符仅指定使用users 或updateUsers。

【讨论】：