Привет, ребята, кто-нибудь может мне помочь, я пытался перейти от поисковой формы к этой странице productResults после того, как пользователь ввел любой текст в поисковой форме. Я могу перейти на эту страницу, но я не мог понять, почему этот компонент не работает и показывать любые результаты по прибытии на эту страницу. Любая помощь будет принята. В основном я пытался перейти к компоненту ProductResults, который фактически отображал бы результаты, когда пользователь вводил что-то в компонент SearchForm. Я не уверен, где я ошибся.
SearchForm.js
import React,{ useState} from "react";
import { Form, FormControl, Button} from 'react-bootstrap';
import { useHistory } from "react-router-dom";
const SearchForm = () => {
const history = useHistory();
const [searchTerm, setSearchTerm] = useState("");
const handleSearchInput = e => {
setSearchTerm(e.target.value);
};
const handleSearchSubmit = () =>{
if(searchTerm){
let text = searchTerm;
setSearchTerm({searchTerm: " "})
history.push({
pathname: "/productResults",
state: { searchTerm: text}
});
}
else {
alert("Please enter some some search text!")
}
}
return (
<Form inline onSubmit= {handleSearchSubmit}>
<FormControl
onChange={handleSearchInput}
value={searchTerm}
type="searchTerm"
placeholder="Search"
className="mr-sm-2"
/>
<button onClick={handleSearchSubmit} type="button" class="btn btn-secondary">Search</button>
</Form>
);
}
export default SearchForm;
ProductResults.js component responsible to display results
import React,{ useState, useEffect} from "react";
import { productList } from "./apiCore";
import Layout from './Layout';
import PCard from "./PCard";
const ProductResults =() => {
const[searchTerm, setSearchTerm] = useState("");
const [searchedResults, setSearchedResults] = useState([]);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
handleSearch();
});
const handleSearch = () => {
if(searchTerm){
productList({ searchTerm: searchTerm || undefined})
.then(response => {
if(response.error){
console.log(response.error);
} else {
setSearchTerm(searchTerm)
setSearchedResults(response)
console.log(response);
setIsLoading(true)
}
})
}
}
const searchedProducts = (searchedResults = []) => {
return (
<div className="row">
{searchedResults.map((product, i) => (
<div className="col-4 mb-3">
<PCard key={i} product={product} />
</div>
))}
</div>
);
};
return (
<Layout
title="Searched Results "
description="Search and find books of your choice"
className="container-fluid"
>
<div className="row">
{searchedProducts(searchedResults)}
</div>
</Layout>
};
}
экспорт по умолчанию ProductResults;