Question

**我想在状态中存储道具，但是我写了“ * TypeError：无法读取null的'fullName'属性*”这是屏幕快照**我从容器组件https://ibb.co/dJkfrWh中获得了道具我提供了我的容器组件和减速器。当我在州外使用道具时，一切对我来说都很好，我只需要将所有这些道具保存在州内

import React from 'react';
import { MonthBox } from './Month/Month';

export class Profile extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            accountSettings: [
                {
                    titleSettings: "Username",
                    fullName: this.props.profile.fullName,
                    icon: faUser,
                },

                {
                    titleSettings: "Looking for a job",
                    fullName: this.props.profile.lookingForAJob,
                    icon: faUser,
                },

                {
                    titleSettings: "Looking for a job description",
                    fullName: this.props.profile.lookingForAJobDescription,
                    icon: faUser,
                },

                {
                    titleSettings: "User ID",
                    fullName: this.props.profile.userId,
                    icon: faUser,
                },
            ]
        };
    }
    render() {


        if (!this.props.profile) {
            return <p>Loading...</p>
        }

        const d = new Date();
        const n = d.getMonth();

        return (
            <div>
                // Removed to JSX shorten the code
            </div>
        )
    }
}

ProfileContainer.js

import React from 'react';
import {connect} from 'react-redux';
import {Profile} from './Profile';
import {profileAC} from "../Redux/profile-reduer";
import * as axios from "axios";
import withRouter from "react-router-dom/es/withRouter";

class ProfileReducer extends React.Component {
    componentDidMount() {
        let userId = this.props.match.params.userId;
        axios.get('https://social-network.samuraijs.com/api/1.0/profile/' + userId).then(response => {
            this.props.profileAC(response.data);
        })
    }

    render() {
        return <>
            <Profile {...this.props} />
        </>
    }
}

let mapStateToProps = (state) => ({
    profile: state.profile.profile,
})

let urlDataRouter = withRouter(ProfileReducer)
export default connect(mapStateToProps, {profileAC})(urlDataRouter);

profile-reducer.js

const ADD_PROFILE = "ADD_PROFILE";

let initialState = {
    profile: null,
}

export const profileReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_PROFILE:
            return {
                ...state, profile: action.profile
            }
        default:
            return state;
    }
}

export const profileAC = (profile) => ({
    type: ADD_PROFILE, profile
})

Answer 1

~~您遇到范围问题。您不想在这里this.props，而只想props。例如：fullName: props.profile.fullName。~~

您不会调度动作，因此将调用处理程序。尝试将操作方法更新为此：

export const profileAC = (profile) => {
    return dispatch => dispatch({ type: ADD_PROFILE, profile });
}

反应如何在状态内存储道具

1 个答案: