如何通过反应上下文保持价值？

Question

这里有 3 个基本组件 searchBar 指的是 搜索栏表单 和 显示搜索的 searchPage 组件结果，当然还有 包含所有结果的 app 组件。

机制：

用户在 searchBar 组件中提交输入， handleSubmit 函数被触发，这改变了状态 setSearchedProducts 到输入值，通过 useContext AND 被 history.push() 推送到 ("/SearchPage") .

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

值通过 React 上下文发送到 app 组件 并且状态被设置为值，同时仍然推送到 ("/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);

显示 searchPage 组件，它获取状态值通过使用 useContext 和 useEffect，fetchProducts() 函数被触发，它获取一组 products 状态值。

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") 组件状态值时丢失，这意味着它 returns 到 "" 值。？
较小的问题，如果用户发送一个空字符串（" "），而API需要一个值，否则会报错，请问解决方案？
有没有办法在重新加载页面后保留该值？

import {createContext} from "react";

export const LocaleContext = createContext(null);

如果需要，这是 localeContext 组件。

Answer 1

您必须在 onSubmit 处理程序中添加 e.preventDefault()。否则，您将重新加载页面，这会导致状态丢失。

如何通过反应上下文保持价值？

How to keep a value with react context?

reactjs

react-router

react-context