时间戳

首页 > 解决方案 > 为什么使用 react-redux 时 props 未定义？

javascript - 为什么使用 react-redux 时 props 未定义？

问题描述

我是 React 的新手，并且一直在尝试查看这段代码，但无法弄清楚可能出了什么问题。当我尝试将 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() 方法时，道具是未定义的。我想我可能用错了连接。谁能帮我吗？

标签： javascriptreactjsredux

解决方案

在功能组件中，您无法访问this

试试这个：

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

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

推荐阅读