回调渲染会丢失子级react-router和redux的路由器上下文

Question

I've been developing an idea but am getting stuck on something unusual (my brain hurts on react-router).

I am trying to dynamically render a list of items using .map from a returned object (of multiple similar objects) and appending them to the render(){return(<div />)} .

I just dont know another way than call a function then .map the result for this callback.

I think that the way I'm doing this means the rendered items lose context. The react-router <Link /> will function as expected in the normal flow (placed inside the render(){return(<div />)} ) but not when the item is created from outside of the render. I have posted the error below the code.

I have read Many different ways of getting around this using context and location/history and withRouter. Frankly I'm lost.

I would appreciate if someone could look at my example below and guide me in the right direction.

A few notes: - main focus appears to be in mystuff - i have many unnecessary imports i know - stripped down for clarity, i would get lost otherwise

index

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

import Main from './Main';
import { routyr } from './Menu';

// remaining paths in Menu.js (routyr) for menu visibility
const router = (
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={Main}>
        {routyr}
      </Route>
    </Router>
  </Provider>
)

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

Main

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

import App from './app';

function mapStateToProps(state){
  return{
    info: state.info,
    myProfile: state.myProfile
  }
}

function mapDispatchToProps(dispatch){
  return { actions: bindActionCreators(actionCreators, dispatch) }
}

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

routyr

import React from 'react';
import { Link } from 'react-router';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { Provider } from 'react-redux';

import { store, history } from './store';

//pages
import App from './app';
import Landing from './Landing';
import Me from './mystuff';
import ViewStuff from './viewStuff';

//Routes for index.js
export const routyr = (
  <span>
    <IndexRoute component={Landing} />
    <Route path="/myStuff" component={Me} />
    <Route path="/viewStuff" component={ViewStuff} />
  </span>
)

//Menu types
//loaded by app.js
export const menuLoggedIn = (
  <div className="MainMenu">
    <Link to='/' className="buttonA green">Home</Link>
    <Link to='myStuff' className="buttonA green">My Stuff</Link>
  </div>
);
export const menuLoggedOut = (
  <div className="MainMenu">
    <Link to='/login' className="buttonA green">Login</Link>
  </div>
);

app

import React from 'react';
import _ from 'lodash';
import { Link } from 'react-router';
import auth from './auth';
import Landing from './Landing';
import Header from './Header';
import { menuLoggedIn, menuLoggedOut } from './Menu';

export default class App extends React.Component {
  constructor(){
    super();
    this.state={
      auth: auth.loggedIn(),
      menu: null
    };
  }

  componentWillMount(){
    if (this.state.auth==true) {
      this.setState({
        menu: menuLoggedIn
      })
    }else{
      this.setState({
        menu: menuLoggedOut
      });
    }
  }

  render(){
    return (
      <div>
        <Header />
        {this.state.menu}<br />
        <div id="view">
          {React.cloneElement(this.props.children, this.props)}
        </div>
      </div>
    );
  }
};

mystuff

import React, { PropTypes } from 'react';
import { render } from 'react-dom';
import { Link } from 'react-router';
import { withRouter } from 'react-router';
import { Provider } from 'react-redux';

import * from './whacks';

export default class Me extends React.Component{
  constructor(){
    super();
  }
  componentDidMount() {

    function listThem(oio){
      oio.map(function(ducks){
        render(

          <div className="ListItem">
            <Link to="/viewStuff"> _BROKEN_ View Stuff</Link>
            <div className="listLabel">{ducks.type}</div>
            <h3>{ducks.description.title}</h3>
            {ducks.description.long}
          </div>, document.getElementById('fishes').appendChild(document.createElement('div'))

        );
      });
    }

    var some = new Whacks();

    some.thing(more, (close, open) => {

      if(close){
        console.log(close));
      } else {
        doIt(open);
      }

    });
  }

  render(){
    return(
      <div>
        <Link to="viewStuff"> _WORKING_ View Stuff</Link>
        <div id="fishes">
        </div>
      </div>
    )
  }
}

store

import { createStore, compose } from 'redux';
import { syncHistoryWithStore } from 'react-router-redux';
import { browserHistory } from 'react-router';
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

/*-------ROOT REDUCER---------*/
/*-------DEFAULT STATES---------*/
/*-------CREATE STORE---------*/
/*-------INTEGRATE HISTORY---------*/

import me from './reducers/obj';
import myProfile from './reducers/myProfile';

const rootReducer = combineReducers(
  {
    routing: routerReducer,
    me,
    myProfile
  }
);

//TEMP remove harcoded var
const uuidSet = "fa78d964";
export const defaultState = {
  uuid: uuidSet,
};

export const store = createStore(rootReducer, defaultState, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export const history = syncHistoryWithStore(browserHistory, store);

actionCreators

export function me (obj){
  return {
    type: "ADD_OBJECTLIST",
    obj
  }
}

export function myProfile (dump){
  return {
    type: "MY_DATA",
    dump
  }
}

from package.json

"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0",

error

Uncaught Error: s rendered outside of a router context cannot navigate.

@UG, I have tried the following in mystuff:

constructor(){
  super();
  this.state={
    oio: {}
  };
}

and

some.thing(more, (close, open) => {

      if(close){
        console.log(close));
      } else {
        this.setState({
          oio: open
        });
      }

});

and

render(){
  let flat = this.state.oio;
  flat.map(function(ducks){
    return (
      <div className="ListItem">
        <Link to="/viewStuff">View Stuff</Link>
        <div className="listLabel">{ducks.type}</div>
        <h3>{ducks.description.title}</h3>
        {ducks.description.long}
      </div>
    )
  })
}

and receive

Uncaught TypeError: flat.map is not a function at Me.render

Answer 1

I am not sure if I get your issue completely. But I think you want to use Link inside render() method of myStuff You can change that to following :

render(){
return(
  <div>
    <Link to="viewStuff"> _WORKING_ View Stuff</Link>
    <div id="fishes">
        {
            oio.map(function(ducks){
                return (
                    <div className="ListItem">
                        <Link to="/viewStuff"> _BROKEN_ View Stuff</Link>
                        <div className="listLabel">{ducks.type}</div>
                        <h3>{ducks.description.title}</h3>
                        {ducks.description.long}
                    </div>
                );
            }
    </div>
  </div>
    )
}

As per the comment from James,

You should use react state to maintain oio object.

constructor() {
 super(); 
 //init
 this.setState({oio : {}});
}

and update the state in async call, when state updates, component can be rerendered.

Answer 2

Huge thanks to UG_ for smacking me in the ear with state. I have pulled in a component and created each components props from the callback objects. My Working solution is as follows in mystuff:

constructor(props){
  super(props);
  this.state={
    oio: []
  }
}
componentDidMount() {

  let listThem = (stuff) => {
    let ioi = [];
    stuff.forEach(function(dood, index, array) {
      let lame = <MyItem plop={dood} key={index} />;
      ioi.push(lame);
    });
    return (
      this.setState({
        oio: ioi
      })
    );
  }

  var some = new Whacks();
  some.thing(more, (close, open) => {
    if(close){
      console.log(close));
    } else {
      listThem(open);
    }
  });

}
render(){
  return(
    <div>
      {this.state.oio}
    </div>
  )
}

Which renders a new copy of the MyItem component with props from each returned object. So now my returned items contain context!