Как реализовать поиск после выборки данных с помощью React Hooks - PullRequest
Новая
       8

Как реализовать поиск после выборки данных с помощью React Hooks

0 голосов
/ 24 марта 2020

Я сделал выборку из 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;

Поиск. 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;

1 Ответ

0 голосов
/ 25 марта 2020

Из-за комментариев, которыми мы обменялись, вам просто нужен условный рендеринг. Внутри 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 равно НЕ пусто (что означает, что вы ищете), вы используете updateUsers для рендеринга пользователя. Вместо этого, когда searchValue пусто, вы визуализируете ALL пользователя, используя users.
Более того, поскольку у вас одинаковая структура в users и updateUsers, вы можете использовать та же самая функция map(): обратите внимание, что троичный оператор указывает только при использовании users или updateUsers.

...