react跨页⾯跨组件传值做需求的时候遇到这样⼀个情况，要跨页⾯跨组件进⾏传值，两个页⾯并不是⽗⼦关系
数据由a页⾯传到b页⾯
在src⽬录下创建store⽬录，并在⾥⾯创建test.js
import { createStore } from 'redux'
const defaultState = {
list: []
}
const store = createStore((state = defaultState, action) => {
console.log(action)
switch (pe) {
case 'ADD_LIST': {
return {
...state,
list: action.list,
}
}
default:
break
}
return state
})
export default store
A页⾯
1. 引⼊test.js
import Store from '../../../store/test' //⽬录情况请根据⾃⼰的实际情况来写
2. 写传递函数
addlist() {
Store.dispatch({
type: 'ADD_LIST',
list:this.state.list
})
router.push('/PromotionRulesSetting') //路由跳转
}
b页⾯
//1.写在this.state={}的下⾯
this.state = State()
Store.subscribe(this.handleStoreUpdate.bind(this))
//2.写的位置你应该知道
handleStoreUpdate() {
this.State())
}
在b页⾯通过this.state.list可以访问到a页⾯传过来的list。
react组件之间通信注意
这种⽅法因为这句
this.state = State()
会导致你之前的this.state中的数据被覆盖，我还没有解决这个问题。如果你也像我⼀样⽤this.state1 = State()来接受数据，那么之前的数据确实不会被覆盖，但是新的问题就是当你想修改数据使⽤this.setState({})时，会发现，你此时修改的数据不是this.state中的数据⽽是this.state1中的数据。这就意味着我之前使⽤this.state数据的地⽅并不会进⾏数据的更新，因为更新的是this.state1的数据！
如果⼤家有解决⽅法也希望能教我⼀下哦~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。