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();
}

redux不在其他页面上显示道具

2 个答案: