سلام خسته نباشید
قبلا این سوالو پرسیدم ولی نتونستم مشکلمو حل کنم و عذر میخوام بابت پرسیدن سوال تکراری❤️
من یه صفحه جستجو دارم و مشکلی که هست میخوام قبل از اینکه چیزی جستجو نشده
تو صفحه جستجو کتابی رو نمایش نده ...
این کد Api جستجویی که دارم
import { useState, useEffect } from "react";
import axios from "axios";
function SearchAPI() {
const [books, setBooks] = useState([]);
const [callback, setCallback] = useState(false);
const [sort, setSort] = useState("");
const [search, setSearch] = useState("");
const [page, setPage] = useState(1);
const [result, setResult] = useState(0);
useEffect(() => {
const getBooks = async () => {
const res = await axios.get(
`/api/books?limit=${page * 100}&${sort}&booktitle[regex]=${search}`
);
setBooks(res.data.books);
setResult(res.data.result);
};
getBooks();
}, [callback, sort, search, page]);
return {
books: [books, setBooks],
callback: [callback, setCallback],
sort: [sort, setSort],
search: [search, setSearch],
page: [page, setPage],
result: [result, setResult],
};
}
export default SearchAPI;
کد صفحه جستوی من
import React, { useContext } from "react";
import { GlobalState } from "../../../GlobalState";
import SearchItem from "../../utils/items/SearchItem";
function Search() {
const state = useContext(GlobalState);
const [books] = state.searchAPI.books;
const [search, setSearch] = state.searchAPI.search;
return (
<div className="box-top10">
<input
type="text"
className="form-control col-md-6 offset-md-3 badge-pill"
placeholder="جــســتــجــو"
value={search}
onChange={(e) => setSearch(e.target.value.toLowerCase())}
/>
<ul className="list-inline text-center">
{books.map((book) => {
return <SearchItem key={book._id} book={book} />;
})}
</ul>
</div>
);
}
export default Search;
کد آیتم های جستجو
import React from "react";
import { Link } from "react-router-dom";
function SearchItem({ book }) {
return (
<div className="box6">
<div className="f7 co">{book.title}</div>
<div className="card-body">
<Link to={`/book/${book._id}`}/>
</div>
</div>
);
}
export default SearchItem;
سلام
دوست عزیز اگه دقت کنید مشکل سرچ را هم همرای مشکلات سوال قبل تان جواب دادم ؛ شما میتونید برای نمایش بر اساس خالی یا نبودن مقدار search شرط قرار بدید ؛ کدتان را تصحیح کردم.
import React, { useContext } from "react";
import { GlobalState } from "../../../GlobalState";
import SearchItem from "../../utils/items/SearchItem";
function Search() {
const state = useContext(GlobalState);
const [books] = state.searchAPI.books;
const [search, setSearch] = state.searchAPI.search;
return (
<div className="box-top10">
<input
type="text"
className="form-control col-md-6 offset-md-3 badge-pill"
placeholder="جــســتــجــو"
value={search}
onChange={(e) => setSearch(e.target.value.toLowerCase())}
/>
<ul className="list-inline text-center">
{search !== ""? books.map((book) => {
return <SearchItem key={book._id} book={book} />
}): null}
</ul>
</div>
)
}
شما باید تویه setstate دیفالت تعریف کنی و خالی بذاری از useeffect یا componentsdidmount استفاده کنید
سلام
دوست عزیز اگه دقت کنید مشکل سرچ را هم همرای مشکلات سوال قبل تان جواب دادم ؛ شما میتونید برای نمایش بر اساس خالی یا نبودن مقدار search شرط قرار بدید ؛ کدتان را تصحیح کردم.
import React, { useContext } from "react";
import { GlobalState } from "../../../GlobalState";
import SearchItem from "../../utils/items/SearchItem";
function Search() {
const state = useContext(GlobalState);
const [books] = state.searchAPI.books;
const [search, setSearch] = state.searchAPI.search;
return (
<div className="box-top10">
<input
type="text"
className="form-control col-md-6 offset-md-3 badge-pill"
placeholder="جــســتــجــو"
value={search}
onChange={(e) => setSearch(e.target.value.toLowerCase())}
/>
<ul className="list-inline text-center">
{search !== ""? books.map((book) => {
return <SearchItem key={book._id} book={book} />
}): null}
</ul>
</div>
)
}
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟