Невозможно прочитать переменную, хранящуюся в хранилище избыточностей вне функции карты

Question

В моем компоненте я отображаю список элементов (с помощью функции map). Однако за пределами map мне нужно отобразить другую информацию. Однако соответствующая переменная становится доступной только при повторении внутри map.

Эта переменная выглядит так из магазина Redux:

{1: { id:1, title: 'title', description: 'description' ... }}

Ниже находится компонент. props.assignment[1].title вне карты выдает следующую ошибку: TypeError: Cannot read property 'title' of undefined.

const SubmissionList = (props) => {

    const assignmentId = props.match.params.assignmentId;

    useEffect(() => {
        if (props.loading != true)
            props.fetchSubmissions(assignmentId);
    }, [])

    if (props.loading) {
        return (<div>Loading...</div>)
    }

    if (props.error) {
        return (<div>{props.error}...</div>)
    }

    return (
        <>
            <h4>Submissions</h4>
            <div className="text-muted">{props.assignment[1].title}</div>

            <div className="container">
                <div className="row">
                    {
                        props.submissionIds.map(submissionId => {
                             const submission = props.submissions[submissionId];
                             if (submission != null)
                                 return (
                                     <>
                                         <div className="text-muted">{props.assignment[submission.assignmentId].title}</div>

                                         />
                                     </>
                                )
                        })
                    }

                </div>
            </div>
        </>
    )
}

const mapStateToProps = (state) => ({
    submissionIds: state.submissionReducer.submissionIds,
    submissions: state.submissionReducer.submissions,
    students: state.submissionReducer.students,        
    assignment: state.submissionReducer.assignment,
    loading: state.submissionReducer.loading,
    error: state.submissionReducer.error
})

const mapDispatchToProps = (dispatch) => {
    return {
        fetchSubmissions: (assignmentId) => dispatch(FetchSubmissionsData(assignmentId))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(SubmissionList);

Это функция, в которой я читаю данные и нормализую их:

export function FetchSubmissionsData(assignmentId) {

    return dispatch => {

        dispatch(dataOperationBegin);

        axios.get('api/Submission/GetSubmissionByAssignment', { params: { assignmentId } })
            .then(response => {
                console.log('Submissions are fetched.');

                const submission = new schema.Entity('submissions');
                const student = new schema.Entity('student');                
                const assignment = new schema.Entity('assignment');

                submission.define({
                    student: student,
                    assignment: assignment
                });

                const normalizedData = normalize(response.data, [submission]);
                dispatch(fetchSubmissionsSuccess(normalizedData))
            })
            .catch(error => { dataOperationFailure(error) });
    }
}

А вот соответствующая часть редуктора:

case FETCH_SUBMISSIONS_SUCCESS:
     const normalizedData = action.payload.normalizedData;
     return {
            ...state,
            loading: false,
            error: null,
            submissionIds: normalizedData.result,
            submissions: normalizedData.entities.submissions,    
            students: normalizedData.entities.students,
            assignment: normalizedData.entities.assignment,
     }

Интересно, в чем проблема. Я что-то упускаю в потоке событий в response-redux?

Answer 1

Я полагаю, вы используете синтаксис для массивов props.assignment[1].title. Здесь вы пытаетесь получить доступ ко второму элементу массива, когда на самом деле вам нужен ключ "1" карты.

Попробуйте использовать props.assignment["1"].title или props.assignment.1.title и посмотрите, работает ли он. Причина, по которой он работает в функции карты, заключается в том, что submissionId - это строка, а не число.