通过道具中的redux商店未定义？答案

【问题标题】：passing redux store in props coming as undefined?通过道具中的redux商店未定义？
【发布时间】：2018-10-01 19:59:39
【问题描述】：

当我将商店从道具中的let store = createStore(myReducer); 传递到其他组件时，它会变得未定义。当我使用react-router-dom 时会发生这种情况，但没有它就可以了。路线部分

路由在App组件中

<BrowserRouter>
        <div>
            <Route path={"/layout"} component={Home} />
            <Route path={"/form"} component={UserForm} />
            <Route exact  path={"/"} component={this.layout}   />
        </div>
    </BrowserRouter

布局方法

  layout(){
    return (
        <Layout store={this.props.store} />
    );
  }

我正在像这样在应用组件中传递商店

const renderAll = () => {
    console.log("inside render all" ,store);
    ReactDOM.render(
      <App store={store} />,
      document.getElementById('root')
    );
}

这家商店会像这样从布局组件到body组件

 <Body ChangeName={this.handleChangeName} store = { this.store}  s_key={this.state.inputkey} />

在正文组件中，我从在 componentWillMount() 的 node.js 服务器中运行的 api 中获取

 fetch('/api/get/all',{
    headers : {
    'content-Type': 'application/json',
    }
 }).then((res)=>{
      console.log(res);
      return res.json();
 }).then(users =>{
      this.store.dispatch({
        type :"FETCH_ALL",
        data : users
      })
      this.setState({
        user: users
      })
      // console.log(this.state.user);
 });

map 函数出现错误

 {this.store.getState().user.map(u => {
       return  <UserDiv name={u.name} age={u.age} location={u.location} gender={u.gender} job={u.job} />;
  })}

错误

无法读取未定义的属性“地图”

奇怪的部分是当我在没有路线的情况下它会好起来的提前谢谢

【问题讨论】：

最好使用 react-redux 库来处理。

标签： arrays node.js reactjs react-router-dom

【解决方案1】：

首先为了从商店中获取更新的状态，你需要subscribe给它点赞

const unsubscribe = store.subscribe(() => {
    store.getState();
})

因此它不是处理更改的 React 方式。

其次，当您将 store 传递给 Layout 组件时，您完全有可能没有 bind layout 函数，因此 this.props.store 未定义。

为了使用 Redux 的 react 方式，你可以使用 Provider 和 connect 方法

import { Provider } from 'react-redux';
const renderAll = () => {
    console.log("inside render all" ,store);
    ReactDOM.render(
      <Provider store={store}>
          <App />
     </Provider>,
      document.getElementById('root')
    );
}

然后你的路线可以简单地

你可以像Layout一样调用Body组件

 <Body ChangeName={this.handleChangeName} s_key={this.state.inputkey} />

然后像这样连接body组件

const mapStateToProps = (state) => {
   user: state.user
}

export default connect(mapStateToProps)(Body)

确保在您的布局组件中使用connected Body component。

之后你可以在Body组件中使用user state

{this.props.user.map(u => {
       return  <UserDiv name={u.name} age={u.age} location={u.location} gender={u.gender} job={u.job} />;
})}

如果用户值最初在redux store中是未定义的，你需要在使用它之前在Body组件中添加一个检查

{this.props.user && this.props.user.map(u => {
       return  <UserDiv name={u.name} age={u.age} location={u.location} gender={u.gender} job={u.job} />;
})}

【讨论】：

每当我从 node.js 服务器中删除 app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'public/views/index.ejs')); }); 时，我会做出您推荐的更改，并且反应路由不起作用。不知道为什么
由于你使用的是browserRouter，你需要为任何Route服务index.ejs，这样客户端Routes才能生效。
但是当我保持这条路线时，我的路线不能正常工作。他们给出了奇怪的结果
你的其他路由都需要在上面配置
我这样做了，然后每当我给出任何路线时，它只会去“/”