Question

在我的一个操作触发并通过react-router在不同的页面和不同的组件上读取后，我在访问我写入商店的内容时遇到了一些问题。这是我的主要代码：

  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={LetterForm}></IndexRoute>
        <Route path="/preview" component={Preview}></Route>
      </Route>
    </Router>
  </Provider>

在索引页面上，用户填写表单，该表单的提交按钮将触发一个操作，将所有表单数据保存到商店并将其带到/预览。然而，当我得到预览组件并尝试访问我刚刚存储的数据时，它无处可寻？如何制作它以便当用户在索引页面上填写表格时，我可以在不同的页面上显示他们的结果。

编辑：这是我所有主要组件的代码

import React from 'react';
import { render } from 'react-dom';

import css from './styles/main.css';
import bootstrap from './styles/bootstrap.css';

import App from './components/App';
import LetterForm from './components/LetterForm';
import Preview from './components/Preview';

import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { Provider } from 'react-redux';
import store, {history} from './store';

const router = (
  <Provider store={store}>
        <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={LetterForm}></IndexRoute>
        <Route path="/preview" component={Preview}></Route>
      </Route>
        </Router>
    </Provider>
);

render(router, document.getElementById('root'));

App.js（提交表单后，submitLetter应包含所有表单数据）

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as actionCreators from '../actions/actionCreators';

import Main from './Main';

function mapStateToProps(state) {
    return {
    submitLocations: state.submitLocations,
    submitLetter: state.submitLetter
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(actionCreators, dispatch);
}

const App = connect(mapStateToProps, mapDispatchToProps)(Main);

export default App;

Main.js

import React from 'react';
import { Link } from 'react-router';
import SubmitTo from './SubmitTo';
import LetterForm from './LetterForm';

class Main extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <div className="main-wrapper">
        <nav className="navbar navbar-default">
          <div className="container-fluid">
            <div className="navbar-header">
              <button type="button" className="navbar-toggle collapsed">
                <span className="sr-only">Toggle navigation</span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
              </button>
              <a className="navbar-brand" href="#">Logo Ipsum</a>
            </div>

            <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul className="nav navbar-nav">
                <li><a href="#">Link</a></li>
              </ul>
              <ul className="nav navbar-nav navbar-right">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Sign up</a></li>
              </ul>
            </div>
          </div>
          </nav>
        <div className="main-container">
                  <h1>
                     Pitch your startup to the top tech sites, free!
                  </h1>
          <SubmitTo {...this.props}/>
                  {React.cloneElement(this.props.children,this.props)}
        </div>
            </div>
        )
    }
}

export default Main;

LetterForm.js

import React from 'react';
import { Link } from 'react-router';

class LetterForm extends React.Component{
  constructor(props){
    super(props);
    this.state = {'companyInput':'','raisedInput':'','raiseLocation':''};
  }
  handleSubmit(){
    var company = this.refs.company.value;
    var companyType = this.refs.companyType.value;
    var raised = this.refs.raised.value;
    var raiseLocation = this.refs.raiseLocation.value;
    var stateCopy = Object.assign({},this.state);
    if(!company){
      stateCopy['companyInput'] = 'input-error';
    }else{
      stateCopy['companyInput'] = '';
    }
    if(!raised){
      stateCopy['raisedInput'] = 'input-error';
    }else{
      stateCopy['raisedInput'] = '';
    }
    if(!raiseLocation){
      stateCopy['raiseLocation'] = 'input-error';
    }else{
      stateCopy['raiseLocation'] = '';
    }
    this.setState(stateCopy);
    this.props.submitLetter(company,companyType,raised,raiseLocation);
  }
  render(){
    return (
      <div className="letter-form well">
        <form ref="letterForm">
          <h2>Dear TechCrunch Editor,</h2>
          <br/>
          <p>I am working with a company called</p>
          <input ref="company" className={"flat-input big-input "+this.state.companyInput}/>
          <br/>
          <p>We are:</p>
          <label className="letter-label">Bootstrapped</label><input value="bootstrapped" type="radio" ref="companyType" name="companyType"/>
          <label className="letter-label">Venture Backed</label><input value="venture" type="radio" ref="companyType" name="companyType"/>
          <br/>
          <p>and have just raised</p> 
          <input ref="raised" type="number" className={"flat-input small-input "+this.state.raisedInput}/>
          <p>from</p>
          <input ref="raiseLocation" className={"flat-input medium-input "+this.state.raiseLocation}/>
          <br/>
          <p>Extra text</p><br/>
          <p>Extra text</p><br/>
          <p>Extra text</p>
        </form>
        <button className="btn btn-success" onClick={this.handleSubmit.bind(this)}>Next step</button>
      </div>
    )
  }
}

export default LetterForm;

Answer 1

您应使用Preview组件（例如route封装Container组件并授予其访问权限，而不是使用PreviewContainer中的Preview组件。来自form州的redux数据props（使用mapStateToProps）。然后在Preview组件中，只需通过form使用props数据。例如this.props.formData。

之类的内容

使用redux，react-router将存储中的数据从一个组件传递到另一个组件在不同的URL上？

1 个答案: