如何解决路由中React中的RxJS导致对象'#<Object>'的属性'action'
我正在学习React
,我决定用array props
RxJS
来代替部分Observables
,我是一个Java
很久的人RxJava
的忠实拥护者,所以我考虑去做一些我已经知道的事情。完成此操作后,我注意到当我尝试导航到任何地方时都会出现错误
history.js:285 Uncaught TypeError: Cannot assign to read only property 'action' of object '#<Object>'
at assign (<anonymous>)
at setState (history.js:285)
at history.js:369
at Object.confirmTransitionTo (history.js:145)
at push (history.js:350)
at navigate (Link.js:105)
at onClick (Link.js:50)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
at executeDispatch (react-dom.development.js:389)
at executeDispatchesInOrder (react-dom.development.js:414)
at executeDispatchesAndRelease (react-dom.development.js:3278)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
at forEachAccumulated (react-dom.development.js:3259)
at runEventsInBatch (react-dom.development.js:3304)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
at handleTopLevel (react-dom.development.js:3558)
at batchedEventUpdates$1 (react-dom.development.js:21871)
at batchedEventUpdates (react-dom.development.js:795)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
at attemptToDispatchEvent (react-dom.development.js:4267)
at dispatchEvent (react-dom.development.js:4189)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at discreteUpdates$1 (react-dom.development.js:21887)
at discreteUpdates (react-dom.development.js:806)
at dispatchDiscreteEvent (react-dom.development.js:4168)
我有一个网络呼叫,可以像这样在我的Home
页面中获取数据
const Home = ({...rest }) => {
const classes = useStyles();
const { data: initialData,isSuccess,isLoading } = useInitialHomeData();
const topVacanciesObservable = from(initialData[2].payLoad);
const topVacanciesSideBarProps = produce(rest,draftRest => {
draftRest.topVacanciesObservable = topVacanciesObservable
})
return <Grid container className={classes.root} spacing={8}>
<SideBar {...topVacanciesSideBarProps} />
</Grid>
}
返回结果后,我创建了我的可观察对象并将其传递给SideBar
,此时代码可以很好地工作,如果我注释掉<SideBar {...topVacanciesSideBarProps} />
,我可以正确地处理问题,发出当我将数据传递到侧边栏时会发生这种情况
const SideBar = ({ topVacanciesObservable,...rest }) => {
const classes = useStyles();
JavascriptTimeAgo.addLocale(en);
const [vacancies,setVacancies] = useState([]);
const handleInit = () => {
const vacanciesSubscription = topVacanciesObservable.subscribe(vacancy => setVacancies(vacancies => concat(vacancies,vacancy)));
return () => {
vacanciesSubscription.unsubscribe()
}
}
useEffect(handleInit,[topVacanciesObservable]);
return (<Grid item md={4} lg={4} xl={4} xs={12} sm={12} className={classes.root}>
<Typography component="span"
variant="h5" gutterBottom>
Popular jobs
</Typography>
<br />
<Divider className={classes.divider} />
<Grid>
<List>
<List >
{vacancies.map(vacancy => <VacancyItem key={vacancy.id} vacancy={vacancy} />)}
</List>
</List>
</Grid>
</Grid>);
}
然后弹出错误。我不知道可能是什么问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。