我如何把我的搜索结果传递给其他组件作为一个道具

Question

希望解决如何将我的搜索结果传递给其他组件，以便当用户使用搜索栏时，显示搜索结果而不是组件呈现的数据。在本例中，它是主屏幕。使用react路由器v5，我试图通过路由器传递它，但许多尝试都不起作用，我应该创建一个单独的搜索路由器吗?

App.js:

<Container>
<Route path="/" component={HomeScreen} exact />
<Route path="/login" component={LoginScreen} exact />
<Route path="/register" component={RegisterScreen} exact />
<Route path="/product/:id" component={ProductScreen} exact />
<Route path="/cart/:id?" component={CartScreen} exact />
</Container>

header.js:

function Header() {
const userLogin = useSelector((state) => state.userLogin);
const { userInfo } = userLogin;
// const [items, setItems] = useState("");
const [searchResults, setSearchResults] = useState([]);
const debounce = useDebounce(searchResults, 500);
const dispatch = useDispatch();
const logoutHandler = () => {
dispatch(logout());
};
useEffect(() => {
axios.get(`/api/search/?search=${searchResults}`).then((response) => {
setSearchResults(response.data[0]);
console.log(response.data[0]);
});
}, [debounce]);
const handleSearch = (e) => {
setSearchResults(e.target.value);
};
return (
<div>
<Navbar bg="dark" variant="dark" className="navCustom">
<Container>
<LinkContainer to="/">
<Navbar.Brand>eCommerce</Navbar.Brand>
</LinkContainer>
<Form className="d-flex">
<Form.Control
type="search"
placeholder="Search"
className="me-2"
aria-label="Search"
onChange={handleSearch}
/>
<Button variant="outline-success">Search</Button>
</Form>

HomeScreen.js:

function HomeScreen({ searchResults }) {
const dispatch = useDispatch();
const productList = useSelector((state) => state.productList);
const { error, loading, products } = productList;
useEffect(() => {
dispatch(listProducts());
}, [dispatch]);
return (
<div>
{searchResults.length > 0 ? (
<Row>
{searchResults.map((product) => (
<Col key={product._id} sm={12} md={6} lg={4} xl={3}>
<Product product={product} />
</Col>
))}
</Row>
) : (
// Fall back to rendering regular products
<Row>
{products &&
products.map((product) => (
<Col key={product._id} sm={12} md={6} lg={4} xl={3}>
<Product product={product} />
</Col>
))}
</Row>
)}
</div>
);
}
export default HomeScreen;

Answer 1

这似乎是React Context的一个很好的用例。在上下文中，您可以使用useState来设置结果。Context可以提供给应用中的其他组件。