当我将商店从let store = createStore(myReducer);道具传递到其他组件时,它变得不确定。我正在使用时会发生这种情况,react-router- dom但如果没有这种情况,它会很好。路线部分
let store = createStore(myReducer);
react-router- dom
路线在App组件中
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()
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功能中出现错误
map
{this.store.getState().user.map(u => { return <UserDiv name={u.name} age={u.age} location={u.location} gender={u.gender} job={u.job} />; })}
错误
无法读取未定义的属性“地图”
奇怪的是,当我在没有路线的情况下工作时,一切都会好起来的,谢谢
首先,为了从商店获取更新状态,您需要 subscribe 像
subscribe
const unsubscribe = store.subscribe(() => { store.getState(); })
因此,这不是应对变更的一种React方法。
其次, 当您将存储传递到Layout组件时,很有可能您没有bind该layout函数,因此this.props.store未定义。
Layout
bind
layout
this.props.store
为了使用Redux的反应方式,您可以使用Provider和 connect 方法
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
<Body ChangeName={this.handleChangeName} s_key={this.state.inputkey} />
并像
const mapStateToProps = (state) => { user: state.user } export default connect(mapStateToProps)(Body)
确保connected Body component在布局组件中使用。
connected Body component
之后,您可以user state在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存储中未定义用户值,则需要在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} />; })}