Javascript 如何在ReactJS中维护道具/状态？

我目前正在使用以下工作流构建React应用程序：

• 应用程序类别列表，用户将选择一个
• 一旦用户选择了应用程序类别，他们将从列表中选择一种水类型
• 然后将根据所选类别和类型显示产品列表
• 然后，他们可以选择一个产品来查看信息，即产品图表、图像等

问题：

• 用户选择产品后，如果单击“后退”按钮，类别和类型道具将丢失

所需解决方案：

• 我需要能够随时维护这些道具/状态，允许在用户返回并更改类别/类型时进行更新

我在下面包含了我的代码以供参考

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

从“React”导入React；
从“react dom”导入react dom；
从“/App”导入应用程序；
从“react Router dom”导入{BrowserRouter as Router}；
ReactDOM.render(
,
document.getElementById（“根”）
);

App.js

import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./components/Home";
import WaterType from "./components/WaterType";
import Products from "./components/Products";
import Product from "./components/Product";

import "./App.css";

function App() {
  return (
    <div className="App">
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/waterType" component={WaterType} />
        <Route path="/products/:productName" component={Product} />
        <Route path="/products" component={Products} />
      </Switch>
    </div>
  );
}

export default App;

从“React”导入React；
从“react router dom”导入{Route，Switch}；
从“/components/Home”导入主页；
从“/components/WaterType”导入WaterType；
从“/组件/产品”进口产品；
从“/组件/产品”导入产品；
导入“/App.css”；
函数App（）{
返回(
);
}
导出默认应用程序；

Home.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
import CategoryData from "./data/CategoryData";

class Home extends Component {
  render() {
    return (
      <>
        <h1>Categories</h1>
        <ul>
          {CategoryData.map((cat, i) => (
            <li key={i}>
              <Link
                to={{
                  pathname: "/waterType",
                  name: cat.name,
                }}
              >
                <img src={cat.imageURL} alt={cat.name} />
                {cat.name}
              </Link>
            </li>
          ))}
        </ul>
      </>
    );
  }
}

export default Home;

import React，{Component}来自“React”；
从“react router dom”导入{Link}；
从“/data/CategoryData”导入类别数据；
类Home扩展组件{
render（）{
返回(
类别

{CategoryData.map（（cat，i）=>(

{cat.name}

))}

);
}
}
导出默认主页；

WaterType.js

import React from "react";
import { Link } from "react-router-dom";
import WaterTypeData from "./data/WaterTypeData";

const WaterType = ({ location }) => {
  const categorySelected = location.name;
  return (
    <>
      <h1>Water Types</h1>
      <p>Current category: {categorySelected}</p>
      <ul>
        {WaterTypeData.map((type, i) => (
          <li key={i}>
            <Link
              to={{
                pathname: "/products",
                categorySelected: categorySelected,
                waterType: type.name,
              }}
            >
              {type.name} - {type.description}
            </Link>
          </li>
        ))}
      </ul>
    </>
  );
};

export default WaterType;

从“React”导入React；
从“react router dom”导入{Link}；
从“/data/WaterTypeData”导入WaterTypeData；
常量WaterType=（{location}）=>{
const categorySelected=location.name；
返回(
水类型
当前类别：{categorySelected}


{WaterTypeData.map（（type，i）=>(

{type.name}-{type.description}

))}

);
};
导出默认的WaterType；

Products.js

import React from "react";
import { Link } from "react-router-dom";
import ProductData from "./data/ProductData";

const Products = ({ location }) => {
  const categorySelected = location.categorySelected;
  const waterType = location.waterType;

  const ProductsResult = ProductData.filter(x => x.categories.includes(categorySelected) && x.waterTypes.includes(waterType));

  return (
    <>
      <h1>Products</h1>
      <p>Current category: {categorySelected && categorySelected}</p>
      <p>Water Type: {waterType && waterType}</p>

      <div className="products">
          <ul>
            {ProductsResult.map((item, i) => (
              <li key={i}>
                <Link
                  to={{
                    pathname: '/products/' + item.slug,
                    name: item.name,
                  }}
                >
                  {item.name}
                </Link>
              </li>
            ))}
          </ul>
      </div>
    </>
  );
};

export default Products;

从“React”导入React；
从“react router dom”导入{Link}；
从“/data/ProductData”导入ProductData；
常数乘积=（{location}）=>{
const categorySelected=location.categorySelected；
const waterType=location.waterType；
const ProductsResult=ProductData.filter（x=>x.categories.includes（categorySelected）和&x.waterTypes.includes（waterType））；
返回(
产品
当前类别：{categorySelected&&categorySelected}

水类型：{waterType&&waterType}


{ProductsResult.map（（项目，i）=>(

{item.name}

))}

);
};
出口默认产品；

Product.js

import React from "react";

const Product = ({ location }) => {
  const productName = location.name;

  return (
    <>
      <h1>{productName}</h1>
    </>
  );
};

export default Product;

从“React”导入React；
常量乘积=（{location}）=>{
const productName=location.name；
返回(
{productName}
);
};
导出默认产品；

我强烈推荐Redux（）用于应用程序状态管理。 一般来说，将Redux包含到现代React应用程序中是一个好主意，在您的情况下，它似乎正是您想要的。 希望这有帮助。 干杯

我强烈推荐Redux（）用于应用程序状态管理。 一般来说，将Redux包含到现代React应用程序中是一个好主意，在您的情况下，它似乎正是您想要的。 希望这有帮助。

---

干杯

我能想到的最简单的解决方案是将您选择的选项（类别和水类型）保留在顶级上下文中

大概是这样的：

// ChoicesProvider.js
import React, { createContext, useState } from "react";

export const ChoicesContext = createContext(null);

export const ChoicesProvider = ({ children }) => {
  const [choices, setChoices] = useState({
    category: null,
    waterType: null,
  });

  return (
    <ChoicesContext.Provider value={{ choices, setChoices }}>
      {children}
    </ChoicesContext.Provider>
  );
};

//ChoicesProvider.js
从“React”导入React，{createContext，useState}；
export const choicecontext=createContext（null）；
导出常量ChoicesProvider=（{children}）=>{
const[choices，setChoices]=useState({
类别：空，
waterType:null，
});
返回(
{儿童}
);
};

…然后在您的入口点：

// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
import { ChoicesProvider } from "./context/ChoicesProvider";

ReactDOM.render(
  <React.StrictMode>
    <ChoicesProvider>
      <Router>
        <App />
      </Router>
    </ChoicesProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

//index.js
从“React”导入React；
从“react dom”导入react dom；
从“/App”导入应用程序；
从“react Router dom”导入{BrowserRouter as Router}；
从“/context/ChoicesProvider”导入{ChoicesProvider}”；
ReactDOM.render(
,
document.getElementById（“根”）
);

…然后每次选择类别/类型时，使用上下文中定义的setChoices将选定状态保存到上下文中。例如：

// Home.js
import React, { Component } from "react";
import { Link } from "react-router-dom";
import CategoryData from "./data/CategoryData";
import { ChoicesContext } from "../../context/ChoicesContext";

const Home = () => {
  const { choices, setChoices } = useContext(ChoicesContext);

  return (
    <>
      <h1>Categories</h1>
      <ul>
        {CategoryData.map((cat, i) => (
          <li key={i}>
            <Link
              onClick={() => setChoices({ ...choices, category: cat.name })}
              to={{
                pathname: "/waterType",
                name: cat.name,
              }}
            >
              <img src={cat.imageURL} alt={cat.name} />
              {cat.name}
            </Link>
          </li>
        ))}
      </ul>
    </>
  );
};

export default Home;

//Home.js
从“React”导入React，{Component}；
从“react router dom”导入{Link}；
从“/data/CategoryData”导入类别数据；
从“../../context/ChoiceContext”导入{ChoiceContext}”；
常量Home=（）=>{
const{choices，setChoices}=useContext（choiceContext）；
返回(
类别

{CategoryData.map（（cat，i）=>(

setChoices（{…选项，类别：cat.name}）
到={{
路径名：“/waterType”，
姓名：cat.name，
}}
>
{cat.name}

))}

);
};
导出默认主页；

希望这能给你一个想法。

---

祝你有一个美好的一天我能想到的最简单的解决方案是将你所选择的（类别和水类型）保持在顶级环境中

某物

[category, setCategory] = useState(null)
[waterType, setWatertype] = useState(null)
[product, setProduct] = useState(null)

<div id="selections">
  {!category && (<Categories />)}
    {(category && !watertype) && (<WaterTypes />)}
    {category && watertype) && (<Products />)}
</div>

<button type="button" onClick={() => setCategory(cat.name)}>{cat.name}</button>