在未定义的道具中传递 redux store？

Question

当我将商店从道具中的 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 ChangeName={this.handleChangeName} store = { this.store}  s_key={this.state.inputkey} />

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

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

错误

Cannot read property 'map' of undefined

奇怪的是，当我在没有路线的情况下进行时，一切正常提前致谢

Answer 1

首先，为了从商店获取更新状态，您需要subscribe喜欢

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

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

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

为了以 React 方式使用 Redux，您可以使用 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} />

并像

一样连接主体组件

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

在未定义的道具中传递 redux store？

passing redux store in props coming as undefined?

arrays

node.js

reactjs

react-router-dom