在道具中传递redux来作为未定义的道具? [英] passing redux store in props coming as undefined?
问题描述
当我将商店中的商品从let store = createStore(myReducer);传递到其他组件时，它是不确定的.当我使用react-router-dom时会发生这种情况，但如果没有这种情况，它就会变好.
路线部分
When I am passing the store from let store = createStore(myReducer); in props to other component it is coming undefined. this is happening whenI am using react-router-dom but without that it is coming alright.
The route part
路线在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} />
);
}
我正在像这样通过应用程序组件传递商店
I am passing the store in the app component like this
const renderAll = () => {
console.log("inside render all" ,store);
ReactDOM.render(
<App store={store} />,
document.getElementById('root')
);
}
这家商店将从这样的布局组件中获取主体组件
this store is going to body component from layout component like this
<Body ChangeName={this.handleChangeName} store = { this.store} s_key={this.state.inputkey} />
在主体组件中，我是从componentWillMount()
in body component I am fetching from from a api which is running in the node.js server in the 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
奇怪的是，当我在没有路线的情况下工作时，一切都会好起来的 预先感谢
the weird part is when I am doing without the route it is coming alright thanks in advance
推荐答案
Firstly in order to get the updated state from the store, you need to subscribe to it like
const unsubscribe = store.subscribe(() => {
store.getState();
})
，因此这不是处理更改的React方法.
and hence it is not a React way to handle changes.
第二，，当您将存储传递给Layout组件时，很可能没有bind layout函数，因此this.props.store是未定义的.
Secondly, when you are passing store to Layout component, it is entirely possible that you did not bind the layout function and hence this.props.store is undefined.
In order to use Redux the react way, you can make use of Provider and connect methods
import { Provider } from 'react-redux';
const renderAll = () => {
console.log("inside render all" ,store);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
}
然后您的路线可以简单地
and then your Routes can simply be
，您可以像这样从Layout调用Body组件
and you can call Body component from Layout like
<Body ChangeName={this.handleChangeName} s_key={this.state.inputkey} />
并像这样连接身体组件
const mapStateToProps = (state) => {
user: state.user
}
export default connect(mapStateToProps)(Body)
确保在布局组件中使用connected Body component.
Make sure to use the connected Body component in your Layout component.
此后，您可以在Body组件之类的中使用user state
After this you can use user state in Body component like
{this.props.user.map(u => {
return <UserDiv name={u.name} age={u.age} location={u.location} gender={u.gender} job={u.job} />;
})}
如果最初在redux存储区中未定义用户值，则需要在Body组件中添加一个检查，然后再像使用
In case the user value is undefined in the redux store initially, you need to add a check in the Body component before using it like
{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来作为未定义的道具?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
