Как создать строку поиска в React

#reactjs

Вопрос:

Я новичок в реагировании и работаю над небольшим проектом, в котором используется строка поиска для поиска данных, полученных из моей базы данных.

Код, который я попробовал, приведен ниже:

 function AcceptedOffers() {

    const buyerId=(localStorage.getItem("userId"));
    console.log(buyerId);

    const [offers, setOffers] = useState([]);

    useEffect(()=>{
        getAllOffers();
    }, []);

    const getAllOffers = async () => {
        await axios.get(`/viewPendingSellerOffers`)
            .then ((response)=>{
                const allNotes=response.data.existingOffers;
                setOffers(allNotes);
            })
            .catch(error=>console.error(`Error: ${error}`));
    }
    console.log(offers);

    const filterData = (offersPara, searchKey) => {
        const result = offersPara.filter(
            (offers) =>
                offers?.value.toLowerCase().includes(searchKey) ||
                offers?.quantity.toLowerCase().includes(searchKey)
        );
        setOffers(result);
    };

    const handleSearchArea = (e) => {
        const searchKey = e.currentTarget.value;

        axios.get(`/viewPendingSellerOffers`).then((res) => {
            if (res?.data?.success) {
                filterData(res?.data?.existingOffers, searchKey);
            }
        });
    };

    return(
        <div className="posts-b">
            <div className="posts__container-b">
                <h1>Accepted Offers</h1>
                <div className="search_box-b">
                    <input type="text" placeholder="What are you looking for?" onChange={handleSearchArea}></input>
                    <i className="fas fa-search"></i>
                </div>
                <main className="grid-b">
                    {offers.map((offer,index)=> {
                        if(offer.status==='accepted' amp;amp; offer.buyerId===buyerId)
                            return (
                                <article>
                                    <div className="text-b">
                                        <h3>Post ID: {index   1}</h3>
                                        <p>Quantity (Kg): {offer.quantity}</p>
                                        <p>Unit Price (Rs): {offer.value}</p>
                                        <p>Expiry Date: {moment(offer.expiryDate).fromNow()}</p>
                                        <p>Collecting Date: {moment(offer.collectingDate).fromNow()}</p>
                                        <p>Offer Gives: {moment(offer.offerCreatedAt).fromNow()}</p>
                                    </div>
                                </article>
                            );
                    })}
                </main>
            </div>
        </div>
    );
}

export default AcceptedOffers;

Из первого вызова API я получаю массив объектов длиной 9. На этом изображении показаны данные, которые я получил при первом вызове API.

Затем я сопоставил эти данные с помощью функции карты. Затем я создал функцию поиска, подобную приведенному выше коду, и попытался отобразить результаты поиска в том же компоненте. Но когда я ввожу поле поиска в качестве входных данных, я получаю сообщение об ошибке » Необработанный отказ (ошибка типа): предложения.значение.Прописные буквы-это не функция». Я прошел через кучу учебных пособий, и я не совсем уверен, как решить эту проблему.

Может ли кто-нибудь помочь мне с этим, пожалуйста, чтобы решить эту проблему? Любые другие комментарии к коду также приветствуются. Я здесь для того, чтобы учиться.

Спасибо!

1. Вы не можете указывать число в нижнем регистре (в ваших данных value: 1 ), поэтому toLowerCase оно не нужно, и как только оно удалено, includes оно также не является функцией для числа.

2. @DBS Я удалил toLowerCase() эту часть и попробовал вот так offers?.value.includes(searchKey) || offers?.quantity.includes(searchKey) , но затем я также получаю эту ошибку Unhandled Rejection (TypeError): offers.value.includes is not a function

3. Я отредактировал исходный комментарий относительно includes (возможно, вам потребуется обновить страницу, чтобы увидеть его) Но это очень похоже на то , что вы ожидаете строку value , вы уверены, что ваш API возвращает правильные данные?

Ответ №1:

Проблема с вашим кодом заключается в том, что offers.value является целым числом, и вы пытаетесь использовать его в качестве строки(в нижнем регистре и включает функции, применимые к строкам). Поэтому, чтобы использовать их, просто измените offers.value на строку и действуйте как обычно. Таким образом, ваша функция filterData будет выглядеть следующим образом —

 const filterData = (offersPara, searchKey) => {
        const result = offersPara.filter(
            (offers) =>
                offers?.value.toString().toLowerCase().includes(searchKey) ||
                offers?.quantity.toString().toLowerCase().includes(searchKey)
        );
        setOffers(result);
    };