javascript - 如何在 ReactJS 的 View 之间传递多个状态？

Question

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

我是 React 新手，正在努力理解管理页面和组件/常量之间的状态是如何工作的。我的代码如下:

categories.js

const categories = [
  {
    name: 'Atomic Spectrosocopy',
    imageURL: ''
  },
  {
    name: 'Cell Cultures',
    imageURL: ''
  },
  {
    name: 'DNA / RNA Work',
    imageURL: ''
  },
  {
    name: 'Electrochemistry',
    imageURL: ''
  },
  {
    name: 'Hydroponics',
    imageURL: ''
  },
];

export default categories

app.js

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;

waterTypes.js

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

waterType.js

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

产品.js

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

Answer 1

我能够复制您的 React 应用程序，以下是我解决该问题的方法。为了使 React Router 工作，您需要将主要组件包装在 BrowserRouter 中，这就是我在 index.js 文件中所做的。

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

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

这是我在启动此 React 应用程序时遵循的文件夹结构。

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

注意:由于您是通过 Router 传递 props，请注意它们不是持久的。您可以通过在组件之间来回导航来检查这一点。如果你是线性导航，就不会有问题。一旦您运行此代码，您需要找到一种方法来使其持久化。