如何通過反應上下文保持價值？

Question

這里有 3 個基本組件searchBar指的是搜索欄表單， searchPage組件顯示搜索結果，當然還有包含它們的app組件。

機制：

1. 用戶在searchBar 組件中提交輸入， handleSubmit function 被觸發，這將 setSearchedProducts 的setSearchedProducts更改為輸入值，通過useContext並通過history.push() 。

 import {useState, useContext } from "react"; import { useHistory } from "react-router-dom"; import { LocaleContext } from "../../../LocaleContext"; const SearchBar = () => { const history = useHistory(); const {setSearchedTerm} = useContext(LocaleContext); const handleSubmit = (SearchTerm) => { setSearchedProducts(SearchTerm) history.push("/SearchPage"); } return ( <form> <input onSubmit={(e) => handleSubmit(e.target.value)}> </input> <button type="submit">Submit</button> </form> ) } export default SearchBar

2. 該值通過反應上下文發送到應用程序組件，並且 state 被設置為該值，同時仍推送到（“/searchPage”）。

 import { useState, useMemo } from "react"; import { searchBar, searchPage } from "./components"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import {LocaleContext} from "./LocaleContext" const App = () => { const [searchedTerm, setSearchedTerm] = useState(""); const providerValue = useMemo(() => ({searchedTerm, setSearchedTerm}), [searchedTerm, setSearchedTerm]) return ( <Router> <LocaleContext.Provider value={providerValue}> <searchBar /> <Switch> <Route exact path="/SearchPage"> <SearchPage /> </Route> </Switch> </LocaleContext.Provider> </Router> ); } export default (App);

3. 顯示searchPage 組件，該組件使用useContext獲取 state 值，並使用useEffect觸發fetchProducts() function，該組件基於 Z9ED39E2EA9312EF586B73E 值獲取一組產品。

 import {useState, useEffect, useContext} from 'react'; import { LocaleContext } from "../../LocaleContext"; const SearchPage = ({}) => { const [products, setProducts] = useState([]); const {searchedTerm} = useContext(LocaleContext); const fetchProducts = (term) => { setLoading(true); const url = new URL( "https://example/products" ); let params = { "query": term }; Object.keys(params).forEach(key => url.searchParams.append(key, params[key])); let headers = { "Accept": "application/json", "Content-Type": "application/json", }; fetch(url, { method: "GET", headers: headers, }).then(response => response.json()).then(json => { setProducts(json); }); } useEffect(() => { fetchProducts(searchedProducts) }, []) return ( { products.map(product => ( <div> {product.name} </div> )) } ) } export default SearchPage

問題：

• 當路由器更改為 ("/searchPage") 組件 state 值丟失時，意味着它返回到""值。 ?
• 較小的問題，如果用戶發送一個空字符串（“”），而API需要一個值，否則會報錯，解決辦法是什么？
• 有沒有辦法在重新加載頁面后保持價值？

 import {createContext} from "react"; export const LocaleContext = createContext(null);

如果需要，這是localeContext組件。

Answer 1

您必須在onSubmit處理程序中添加e.preventDefault() 。 否則，您將重新加載頁面，從而導致狀態丟失。

Answer 2

我注意到下面的代碼中的“setSearchedProducts”和“setSearchedTerm”應該是相同的。 這可能是你的問題！

 const SearchBar = () => {... const {setSearchedTerm} = useContext(LocaleContext); const handleSubmit = (SearchTerm) => { setSearchedProducts(SearchTerm)... }