profile
viewpoint

Ask questionsmap through connected component, get data of last saga call within all componenets

** want to report a bug?**

What is the current behavior?

i have a connect componenet name Section(Redux component), which render a section within a View.

Sometimes the View has more than one Section and this how i render: `/** *

  • SubViews

*/

import React, { memo, useEffect } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { createStructuredSelector } from 'reselect'; import { compose } from 'redux'; import { Box } from '@material-ui/core'; import { handleErrorStatus } from 'utils/apiUtils'; import EmptyPaper from 'components/layout/atoms/EmptyPaper'; import ViewSection from 'containers/ViewSection';

import { strings } from 'constants/strings'; import { useInjectSaga } from 'utils/injectSaga'; import { useInjectReducer } from 'utils/injectReducer'; import reducer from './reducer'; import saga from './saga'; import { loadSubViews } from './actions'; import makeSelectSubViews, { makeSelectSubViewsLoading, makeSelectSubViewsError, } from './selectors';

export function SubViews({ handleLoadViewSections, views, viewsLoading, viewsError, siteId, assessmentId, location, history, }) { useInjectReducer({ key: 'subViews', reducer }); useInjectSaga({ key: 'subViews', saga }); const pathnames = location.pathname.split('/').filter(x => x); useEffect(() => { const viewcode = pathnames[6]; if (siteId !== undefined && siteId !== null) { handleLoadViewSections(siteId, assessmentId, viewcode); } }, []);

if (viewsLoading) { return <EmptyPaper type="loading" text={strings.viewSectionsLoading} />; } if (handleErrorStatus(viewsError)) { return <EmptyPaper type="empty" text={handleErrorStatus(viewsError)} />; } if (views === null || views.length === 0) { return ( <Box p={4}> <EmptyPaper type="empty" text="no data" /> </Box> ); } return ( <> <Box p={4}> {views[0].sections.map(section => ( <ViewSection key={section.id} viewcode={views[0].viewCode} section={section} history={history} location={location} siteId={siteId} assessmentId={assessmentId} /> ))} </Box> </> ); }

SubViews.propTypes = { handleLoadViewSections: PropTypes.func.isRequired, views: PropTypes.array, viewsLoading: PropTypes.bool.isRequired, viewsError: PropTypes.bool.isRequired, siteId: PropTypes.number, assessmentId: PropTypes.string, location: PropTypes.object, history: PropTypes.object, };

const mapStateToProps = createStructuredSelector({ views: makeSelectSubViews(), viewsLoading: makeSelectSubViewsLoading(), viewsError: makeSelectSubViewsError(), });

function mapDispatchToProps(dispatch) { return { handleLoadViewSections: (siteId, assessmentId, viewcode) => { dispatch(loadSubViews(siteId, assessmentId, viewcode)); }, }; }

const withConnect = connect( mapStateToProps, mapDispatchToProps, );

export default compose( withConnect, memo, )(SubViews); `

and my Section code is:

`/** *

  • ViewSection

*/

import React, { memo, useEffect, useCallback } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import SectionTitle from 'components/layout/atoms/SectionTitle'; import QuestionsPanel from 'components/sections/QuestionsPanel'; import { createStructuredSelector } from 'reselect'; import { compose } from 'redux'; import Location from 'containers/sections/Location'; import Assets from 'containers/sections/Assets'; import Threats from 'containers/sections/Threats'; import { useInjectSaga } from 'utils/injectSaga'; import { useInjectReducer } from 'utils/injectReducer'; import { makeSelectQuestions, makeSelectQuestionsLoading, makeSelectQuestionsError, } from './selectors'; import reducer from './reducer'; import saga from './saga'; import { loadQuestions, updateAnswer } from './actions'; import { makeSelectDescriptors, makeHelperDataSelector, } from '../Site/selectors'; import { toggleHelpPanel } from '../Site/actions';

export function ViewSection({ section, viewcode, siteId, assessmentId, history, location, handleLoadQuestions, questions, loading, error, handleUpdateAnswer, descriptors, helperData, handletoggleHelpPanel, }) { useInjectReducer({ key: 'viewSection', reducer }); useInjectSaga({ key: 'viewSection', saga }); console.log('ViewSection()'); console.log(section); // console.log(viewcode); useEffect(() => { console.log('ViewSection() useEffect()'); if (section.contentType === 'Questions') { handleLoadQuestions( siteId, assessmentId, viewcode, section.sectionCode, descriptors, ); } }, [section]);

const onHandleUpdateAnswer = useCallback((answer, answerId) => { handleUpdateAnswer(siteId, assessmentId, answer, answerId); }, []);

if (section.contentType === 'Locations') { return ( <Location history={history} location={location} siteId={siteId} assessmentId={assessmentId} section={section} loading={loading} error={error} /> ); } if (section.contentType === 'Assets') { return ( <Assets history={history} location={location} siteId={siteId} assessmentId={assessmentId} section={section} /> ); } if (section.contentType === 'Threats') { return ( <Threats history={history} location={location} siteId={siteId} assessmentId={assessmentId} section={section} /> ); }

const handleDrawerClose = (itemId, isDrawerOpen, ratings, colorOrder) => { handletoggleHelpPanel({ itemId, isDrawerOpen, ratings, colorOrder }); }; console.log('ViewSection() render'); console.log(questions)

if (section.contentType === 'Questions') { return ( <QuestionsPanel headingText={section.title} helperData={helperData} handleDrawerClose={handleDrawerClose} key={section.id} loading={loading} error={error} questionsList={questions} handleAnswerSubmit={onHandleUpdateAnswer} /> ); }

return ( <div> <SectionTitle text={section.title} /> </div> ); }

ViewSection.propTypes = { section: PropTypes.object.isRequired, // from parent compoenent viewcode: PropTypes.string.isRequired, // the view code from parent location: PropTypes.object, history: PropTypes.object, siteId: PropTypes.number, assessmentId: PropTypes.string, handleLoadQuestions: PropTypes.func, questions: PropTypes.array, loading: PropTypes.bool, error: PropTypes.any, handleUpdateAnswer: PropTypes.func, descriptors: PropTypes.array.isRequired, helperData: PropTypes.object, handletoggleHelpPanel: PropTypes.func, };

const mapStateToProps = createStructuredSelector({ questions: makeSelectQuestions(), loading: makeSelectQuestionsLoading(), error: makeSelectQuestionsError(), descriptors: makeSelectDescriptors(), helperData: makeHelperDataSelector(), });

function mapDispatchToProps(dispatch) { return { handleLoadQuestions: ( siteId, assessmentId, viewcode, sectioncode, descriptors, ) => { dispatch( loadQuestions(siteId, assessmentId, viewcode, sectioncode, descriptors), ); }, handleUpdateAnswer: (siteId, assessmentId, updatedAnswer, answerId) => { dispatch(updateAnswer(siteId, assessmentId, updatedAnswer, answerId)); }, handletoggleHelpPanel: (action, helperData) => { dispatch(toggleHelpPanel(action, helperData)); }, }; }

const withConnect = connect( mapStateToProps, mapDispatchToProps, );

export default compose( withConnect, memo, )(ViewSection); `

Now, when my page renders, i get list of sections with their own headings but i get same lits of questions within all the sections.

this screen schot of console will explain it better console

What is the expected behavior?

it is expected when i map through my connected component, each one triggers it's own saga and reducer and render its own related question list

facebook/react

Answer questions aweary

We try to use this issue tracker for bug reports and feature requests only. I recommend checking out the list of great support resources listed on the doc page, Where to Get Support.

useful!

Related questions

Disable react strict mode on third party libraries hot 4
Refs - &#34;object is not extensible&#34; hot 4
Warning: Unknown DOM property for. Did you mean htmlFor? hot 4
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> hot 3
React@16.9 block `javascript:void(0);` hot 3
DevTools: Updating state or props in devtools does not trigger component update. hot 2
Hooks API - hook breaks when exported from module hot 2
Feedback on useEffect depndencies change error hot 2
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 1
TypeError: Object(...) is not a function hot 1
useEffect causes 'callback is not a function' exception hot 1
Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component hot 1
eslint-plugin-react-hooks v2.0.0 is not loaded correctly. hot 1
Old references retained by memoizedProps in fiber hot 1
Stale values for useState inside callback functions hot 1
Github User Rank List