在道具中传递redux来作为未定义的道具？

一尘不染

在道具中传递redux来作为未定义的道具？

node.js

当我将商店从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} />

在主体组件中，我是从正在node.js服务器中运行的api获取的 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} />;
  })}

错误

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

奇怪的是，当我在没有路线的情况下工作时，一切都会好起来的，谢谢

阅读 232

2020-07-07

共1个答案

一尘不染

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

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

因此，这不是应对变更的一种React方法。

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

为了使用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')
    );
}

然后您的路线可以简单地

你可以Body从Layout喜欢调用组件

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

并像

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

export default connect(mapStateToProps)(Body)

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

之后，您可以user state在Body类似的组件中使用

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

如果最初在redux存储中未定义用户值，则需要在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} />;
})}

2020-07-07