Почему реквизиты не определены при использовании response-redux?

Question

Я новичок в React и некоторое время пытался взглянуть на этот код и не могу понять, что может быть не так.Я получаю сообщение об ошибке, в котором говорится, что реквизиты не определены, когда я пытаюсь console.log this.props вывести на экран.

Вот код:

import React, { useState } from 'react';
import Grid from '@material-ui/core/Grid';
import InputField from 'shared/components/form/Inputfield';
import DatePicker from 'shared/components/pickers/DatePicker';
import InfoButton from 'shared/components/buttons/InfoButton';
import CustomButton from 'shared/components/buttons/CustomButton';
import TextArea from 'shared/components/form/TextArea';
import { connect } from 'react-redux';

export function ProjectDetails() {
    const [values, setValues] = React.useState({
        full_project_name: ' ',
        short_name: ' ',
        associated_projects: ' ',
        short_description: ' ',
        summary: ' ',
        url_to_webpage: ' ',
        start_date: ' ',
        end_date: ' ',
    });

    const handleNameChange = full_project_name => event => {
        console.log('Props of this object', this.props);
        setValues({ ...values, [full_project_name]: event.target.value });
    };

    const handleShortNameChange = short_name => event => {
        setValues({ ...values, [short_name]: event.target.short_name });
    };

    console.log('Project values', { values });

    return (
        <>
            <h1>Project Details</h1>
            <Grid container spacing={1}>
                <Grid item xs={12}>
                    <h3>Full project name *</h3>
                </Grid>
                <Grid item xs={12}>
                    <InputField handler={handleNameChange('full_project_name')} />
                </Grid>
                <Grid item xs={12}>
                    <h3>Short name (Acronym)</h3>
                </Grid>
                <Grid item xs={12}>
                    <InputField handler={handleShortNameChange('short_name')} />
                </Grid>
                <Grid item xs={12}>
                    <h3>
                        Associated Projects <InfoButton />
                    </h3>
                </Grid>
                <Grid item xs={11}>
                    <InputField placeHolderText="Search Project" />
                </Grid>
                <Grid item xs={1}>
                    <CustomButton buttonType="Add" text="Add" />
                </Grid>
                <Grid item xs={12}>
                    <h3>
                        Short Description * <InfoButton />
                    </h3>
                </Grid>
                <Grid item xs={12}>
                    <TextArea maxChars={350} />
                </Grid>
                <Grid item xs={12}>
                    <h3>
                        Summary * <InfoButton />
                    </h3>
                </Grid>
                <Grid item xs={12}>
                    <TextArea maxChars={4000} />
                </Grid>
                <Grid item xs={12}>
                    <h3>URL to Web Page</h3>
                </Grid>
                <Grid item xs={12}>
                    <InputField />
                </Grid>
                <Grid item xs={6}>
                    <h3>Start date *</h3>
                </Grid>
                <Grid item xs={6}>
                    <h3>End date *</h3>
                </Grid>
                <Grid item xs={12}>
                    <h3>
                        <DatePicker />
                    </h3>
                </Grid>
            </Grid>
        </>
    );
}

function mapStateToProps(state) {
    console.log('The state when map happens is: ', state);
    return {
        full_project_name: state.projectReducer.full_project_name,
        short_name: state.projectReducer.short_name,
        associated_projects: state.projectReducer.associated_projects,
        short_description: state.projectReducer.short_description,
        summary: state.projectReducer.summary,
        url_to_webpage: state.projectReducer.url_to_webpage,
        start_date: state.projectReducer.start_date,
        end_date: state.projectReducer.end_date,
    };
}

export default connect(mapStateToProps)(ProjectDetails);

Когда метод handleNameChange () вызывается, реквизиты не определены.Я думаю, что я могу использовать подключение неправильно.Может кто-нибудь мне помочь?

Answer 1

В функциональном компоненте вы не можете получить доступ к this

Попробуйте вместо этого:

export function ProjectDetails(props) {
    const handleNameChange = full_project_name => event => {
        console.log('Props of this object', props);
    }
}

Мы получаем доступ к реквизиту из аргументов функции.Прочитайте в реактивной документации: https://reactjs.org/docs/components-and-props.html