Javascript 如何在ReactJS中的视图之间传递多个状态？

我目前正在开发一个应用程序，其中将显示类别列表。选择类别后，应用程序将转到下一页，该页将询问有关水类型的问题。选择水类型后，应用程序应显示与所选类别和水类型匹配的产品列表

我是个新手，不知道如何在页面和组件/常量之间管理状态。我的代码如下：

categories.js

app.js

waterType.js

products.js

---

我能够复制您的React应用程序，下面是我如何解决它的。为了使React路由器工作，您需要将主要组件包装在BrowserRouter中，这就是我在index.js文件中所做的

然后，在App.js文件中，我创建了用于在组件之间导航的单独路由。使用链接组件传递道具的方式不正确。这就是为什么你们的州没有定义。在代码的其余部分，我只做了一些小的更改，希望对您来说是微不足道的

//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路由器来完成。非常感谢Ajin。你知道为了让道具持久化，我应该做些什么吗？我很高兴这有帮助，扎卡里！。这有点棘手。你可以用几种方法来做。例如，您可以使用诸如Redux之类的状态管理库。恐怕我现在没有确切的答案给你。也许你可以查看这个链接了解更多信息，你可能会发现一些东西。谢谢

import React, { Component } from 'react'
import { Link } from "gatsby"
import categories from '../components/categories'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Categories</h1>
        <ul>
          {categories.map((cat, i) => (
            <li key={i}>
              <Link
              to={'/waterType'}
              state={{categorySelected: cat.name}}
              >
                {cat.name}
              </Link>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

const waterTypes = [
  {
    name: 'Type 1',
    description: 'xxx'
  },
  {
    name: 'Type 2',
    description: 'xxx'
  },
  {
    name: 'Type 3',
    description: 'xxx'
  },
  {
    name: 'Mains / Portable Supply',
    description: 'xxx'
  },
  {
    name: 'Softened',
    description: 'xxx'
  }
];

export default waterTypes

import React, { Component } from 'react'
import { Link } from "gatsby"
import Layout from "../components/layout"
import waterTypes from "../components/waterTypes"

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

export default waterType

import React, { Component } from 'react'
import { Link } from "gatsby"
import Layout from "../components/layout"

const products = ({ location }) => {
  const { state = {} } = location
  const { categorySelected, waterType } = state
  console.log(state);
  return (
    <>
      <h1>Products</h1>
      <p>Current category: {categorySelected}</p>
      <p>Water Type: {waterType}</p>
    </>
  )
}

export default products

//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")
);

//App.js

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

    import "./App.css";

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

    export default App;

//components/Home.js

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

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

export default Home;

//components/WaterType.js

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

const waterType = ({ location }) => {
  const categorySelected = location.name;
  return (
    <>
      <h1>Water Types</h1>
      <p>Current category: {categorySelected}</p>
      <ul>
        {waterTypes.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;

//components/Products.js
import React from "react";

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

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

export default products;

--src
      --App.js
      --index.js
      --components
        --data
        --Home.js
        --Product.js
        --WaterType.js