Javascript 回调渲染会丢失子react路由器的路由器上下文&；重演

我一直在发展一个想法，但我遇到了一些不寻常的事情（我的大脑在工作中受伤）

我正在尝试使用返回对象（多个类似对象）中的.map动态呈现项目列表，并将它们附加到

render（）{return（）}

我只是不知道调用函数的其他方法。映射这个回调的结果

我认为我这样做意味着渲染的项目失去了上下文。react路由器

将在正常流中（放置在

渲染（）{return（）}

内部）按预期运行，但在从渲染外部创建项目时不会运行。我已经在代码下面发布了错误

我已经阅读了许多不同的方法，使用上下文和位置/历史以及withRouter来解决这个问题。坦白说，我迷路了

如果有人能看看我下面的例子，并为我指引正确的方向，我将不胜感激

请注意： -主要关注点似乎在mystuff -我知道有很多不必要的进口商品 -为了清楚起见，我会脱光衣服，否则我会迷路的

索引

鲁蒂尔

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

动作创造者

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

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

来自package.json

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

错误

未捕获错误：在路由器上下文之外呈现的无法导航

@UG， 我在mystuff中尝试了以下方法：

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

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

及

及

render（）{
设flat=this.state.oio；
平面图（功能（鸭）{
返回(
查看资料
{ducks.type}
{ducks.description.title}
{ducks.description.long}
)
})
}

接收

未捕获类型错误：flat.map不是函数 看着我

---

我不确定我是否完全理解你的问题。但我认为您需要在

render（）中使用
myStuff
您可以将其更改为以下内容：

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

并在异步调用中更新状态，当状态更新时，可以重新调用组件。
非常感谢UG_uuu用状态打我的耳朵。
我已经拉入了一个组件，并从回调对象创建了每个组件道具。
我在mystuff中的工作解决方案如下：

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

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

构造函数（道具）{
超级（道具）；
这个州={
oio:[]
}
}
componentDidMount（）{
让ListThemes=（stuff）=>{
设ioi=[]；
forEach（函数（dood、索引、数组）{
让跛脚=；
推（跛脚）；
});
返回(
这是我的国家({
oio:ioi
})
);
}
var some=新的重击（）；
some.thing（更多，（关闭，打开）=>{
如果（关闭）{
控制台日志（关闭））；
}否则{
列出它们（开放）；
}
});
}
render（）{
返回(
{this.state.oio}
)
}

它使用每个返回对象的道具呈现MyItem组件的新副本。因此，现在我返回的项目包含上下文
 我希望是这样。我这里的问题是，oio对象是componentDidMount.中的某个.thing的异步回调。更新了答案我很困惑我怎么没有想到它。非常感谢。因为我无法在渲染中映射对象。这些是非常嵌套的对象。你能给我对象的结构吗？如果做得好，我想我们可以让它工作，我一直在做理想的！！我会在render fn中执行
操作，而不是将其设置为state。我只是将对象/数组设置为状态
constructor(){
  super();
  this.state={
    oio: {}
  };
}

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

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

});

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

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

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

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