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

我正在像这个

那样在app组件中传递商店

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

我从正在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} />;
  })}

错误

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

奇怪的是，当我在没有路线的情况下，它正好运行提前谢谢

Answer 1

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

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

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

其次，当您将商店传递给Layout组件时，完全有可能您没有bind layout函数，因此{{1未定义。

为了使用Redux的反应方式，您可以使用Provider和 connect 方法

this.props.store

然后您的路线可以简单地

您可以从import { Provider } from 'react-redux'; const renderAll = () => { console.log("inside render all" ,store); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); }调用Body组件

Layout

并连接身体组件，如

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

确保在Layout组件中使用const mapStateToProps = (state) => { user: state.user } export default connect(mapStateToProps)(Body)。

在此之后，您可以在connected Body component组件中使用user state，例如

Body

如果最初在redux存储中未定义用户值，则需要在使用之前在Body组件中添加一个检查，如

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

通过redux存储在道具中未定义？

1 个答案: