راکت
راکت
بازگشت به پرسش و پاسخ‌ها
حل شده

نمایش بعد از جستجو

3 پاسخ

سلام دوستان خسته نباشید

من میخوام تو صفحه جستجویی که دارم تا قبل از اینکه چیزی جستجو نشده کتابی رو نمایش نده

این کد صفحه جستجوی منه

import React, { useContext } from "react";
import { GlobalState } from "../../../GlobalState";
import SearchItem from "../../utils/items/SearchItem";
import Filters from "./Filters";

function Search() {
  const state = useContext(GlobalState);
  const [books] = state.searchAPI.books;

  return (
    <div className="container mt-4">
      <div className="row">
        <div className="col-md-12">
            <Filters />
            <ul className="list-inline text-center">
              {books.map((book) => {
                return <SearchItem key={book._id} book={book} />;
              })}
            </ul>
          </div>
        </div>
      </div>
  );
}

export default Search;
nodejs
x
x
@SZaaaa1111
ثبت پرسش جدید

پاسخ‌ها

3
Banana Life
Banana Life
@shift.delete
بهترین پاسخ

سلام
دوست عزیز شما هر جا کامپوننت سرچ تان صدا زدید props ->emptySearch مقدارش همان مقدار hook search که تعریفش کردید قرار میدید.

const [search , setSearch ] = useState("");

<Search emptySearch={search} />
import React, { useContext } from "react";
import { GlobalState } from "../../../GlobalState";
import SearchItem from "../../utils/items/SearchItem";
import Filters from "./Filters";

function Search(props) {
  const { emptySearch } = props
  const state = useContext(GlobalState);
  const [books] = state.searchAPI.books;

  return (
    <div className="container mt-4">
      <div className="row">
        <div className="col-md-12">
            <Filters />
            <ul className="list-inline text-center">
              {emptySearch == "" ? '': books.map((book) => {
                return <SearchItem key={book._id} book={book} />;
              })}             
            </ul>
          </div>
        </div>
      </div>
  );
}

export default Search;
0
ارسال پاسخ
فرید عقیلی
فرید عقیلی
@faridaghili

تخصص: طراح و توسعه دهنده وب

انگار در لحظه لود صفحه متغیر books رو با نتیجه api پر کردی.
این کار رو انجام نده و زمانی کتاب‌ها رو لود که کاربر رو دکمه جستجو یا هر گزینه دیگه‌ای که گذاشتی کلیک کنه.
من react کار نیستم ولی کدت ساده‌ست و به نظر اینطور میاد.

0
ارسال پاسخ
x
x
@SZaaaa1111

تخصص: هیچولوژیست

خیلی ممنون که وقت گذاشتید

این صفحه ای هست که کتاب ها رو فیلتر میکنه و APIها رو از GlobalState که قبلا قرار دادم میگیره

import React, { useContext } from "react";
import { GlobalState } from "../../../GlobalState";

function Filters() {
  const state = useContext(GlobalState);
  const [search, setSearch] = state.searchAPI.search;

  return (
    <div className="container mt-1">
      <div className="row">
        <input
          type="text"
          className="form-control col-md-6 offset-md-3 badge-pill"
          placeholder="جــســتــجــو"
          value={search}
          onChange={(e) => setSearch(e.target.value.toLowerCase())}
        />
      </div>
    </div>
  );
}

export default Filters;

اینم آیتم های فیلتر شده رو نشون میده

import React from "react";
import { Link } from "react-router-dom";

function SearchItem({ book }) {
  return (
    <div className="container-fluid col-md-8">
      <div className="box6">
        <div className="ol-md-12 col-sm-12 col-xs-12 box6-inner text-center">
          <div className="f7 co">{book.title}</div>
          <div className="card-body">
            <Link
              to={`/book/${book._id}`}
              className="btn icon fa fa-eye mt-3"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

export default SearchItem;

من اینجا نمیتونم از هوک useState استفاده کنم
چطور میتونم این کارو انجام بدم؟
ممنون میشم اگه بتونی راهنماییم کنی❤️

0
ارسال پاسخ

گفتگوهای مرتبط

شاید پاسخ شما همین‌جا باشد

نمایش ارور هنگام کوئری گرفتن

1 پاسخ

نمایش نتیجه بعد جستجو

حل شده

نمایش لیست کاربران

بدون پاسخ

ایجاد یک جستجوی ساده درون دیتابیس با استفاده از فرم

حل شده

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام