Question

我是React的新手，已经尝试看过这段代码一段时间了，无法弄清楚什么是错误的。我在尝试将console.log this.props记录到屏幕时收到一条错误消息，指出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);
    }
}

我们可以从函数的参数访问道具。阅读React文档：https://reactjs.org/docs/components-and-props.html

为什么在使用react-redux时props是未定义的？

1 个答案: