redux 不在另一个页面上显示道具

Question

我有一个所有页面的导航栏。我想在里面做一个购物车，但是当我进入内部产品页面时，我传输的道具没有显示出来。

为什么会这样？ 我想这是我的问题React router v4 not working with Redux 但是我该如何实现呢？ 你怎么看？

App.js

   import React, {Component} from 'react';
import {Container} from 'reactstrap';
import {
  BrowserRouter,
  Route,
  Switch
} from "react-router-dom";

import './App.css';
import NavbarMenu from './components/navbar'
import Main from './components/main';
import Good from './components/good';

class App extends Component {

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <NavbarMenu/>
          <Container>
            <Switch>
              <Route path="/" exact component={Main}/>
              <Route path="/good/:id" component={Good}/>
            </Switch>
          </Container>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

导航栏

  import React from 'react';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button
} from 'reactstrap';
import {withRouter} from 'react-router-dom';
import connect from 'react-redux/es/connect/connect';
import {getCart} from '../../redux/actions/cartAction';

class NavbarMenu extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  render() {
console.log(this.props)
    const cartLength = this.props.cart.length;
    const cartItems = this.props.cart.map(e => {
      return <div key={e.id} style={{marginBottom: '20px'}}>
        <DropdownItem
          style={{display: 'inline-block', width: 'auto'}}
          onClick={() => {
            this.props.history.push('/good/' + e.id)
          }}>
          {e.name}
        </DropdownItem>
        <Button
          style={{display: 'inline-block', float: 'right', marginRight: '20px'}}
          color="danger"
        >X</Button>
      </div>
    });

    return (
      <Navbar
        color="light"
        light expand="md"
        style={{marginBottom: '20px'}}
      >
        <NavbarBrand
          style={{cursor: 'pointer'}}
          onClick={() => {
            this.props.history.push('/')
          }}
        >
          Shop
        </NavbarBrand>
        <NavbarToggler onClick={this.toggle}/>
        <Collapse isOpen={this.state.isOpen} navbar>
          <Nav className="ml-auto" navbar>
            <UncontrolledDropdown nav inNavbar>
              <DropdownToggle nav caret>
                Cart: {cartLength} items
              </DropdownToggle>
              <DropdownMenu right style={{width: '300px'}}>
                {cartItems}

                <DropdownItem divider/>

              </DropdownMenu>
            </UncontrolledDropdown>
          </Nav>
        </Collapse>
      </Navbar>
    );
  }
}

const mapStateToProps = state => ({
  cart: state.cart.cart
});

export default withRouter(connect(mapStateToProps, {getCart})(NavbarMenu));

Answer 1

根据您提供的打印结果，您在不同的窗口中打开项目，因此，窗口中会话的变量没有传递。

您可以使用的一种解决方案是在浏览器 localStorage 中保存您稍后需要的商店部分。

您可以通过使用 Redux 订阅功能来做到这一点。

一个例子可以是：

localStorage.js

export const loadState = () => {
  try {
    const serializedState = localStorage.getItem('state');
    if (serializedState === null) return undefined;

    return JSON.parse(serializedState);
  } catch (err) { return undefined; }
};

export const saveState = (state) => {
  try {
    const serializedState = JSON.stringify(state);
  } catch (err) {
    // errors
  }
}

你可以在 redux 商店里放：

import { loadState, saveState } from './localStorage'; 

const persistedState = loadState();
const store = createStore(persistedState);

store.subscribe(() => saveState(store.getState()));

来源：https://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage

Answer 2

我通过添加此代码解决了我的问题

componentDidMount() {
   this.props.getCart();
}