Question

我正在尝试使用redux将胶片的详细信息添加到react组件中但是让它变得不确定，这是我的代码：

电影服务：

import axios from 'axios';
import config from '../config/config';
export const FilmServices = {
    getAllFilms,
    searchFilm,
    getFilmByID
};
function getFilmByID(apiEndpoint){
    return axios.get(config.detailsUrl+apiEndpoint).then((response)=>{
        return response;
    }).catch((err)=>{
        console.log(err);
    })
}

电影动作：

import {FilmServices} from '../../services/FilmServices'
export function getFilmByID(idFilm) {
    return dispatch => {
        FilmServices.getFilmByID(idFilm)
            .then((response) => {
                if (response) {
                    dispatch(GET_FILMS_BY_ID(response));
                }
            })
    }
}
function GET_FILMS_BY_ID(response){
    return{
        type: "GET_FILMS_BY_ID",
        payload: response
    }
}

胶片减缩剂：

const initialState = { film: {}}
export function filmreducer(state = initialState, action) {
        case 'GET_FILMS_BY_ID':
            console.log(action.payload.data)
            return{
                ...state,
                film : action.payload.data
            };
        default:
            return state
    }
}

和详细信息组件

import React, {Component} from 'react';
import connect from "react-redux/es/connect/connect";
import {getFilmByID} from "../store/actions/FilmActions";

class Details extends Component {



    componentDidMount() {
        const {idFilm} = this.props.match.params
        const {dispatch } = this.props;
        dispatch(getFilmByID(idFilm));
    }

    constructor(props) {
        super(props);
    }

    render() {
         const {film} = this.props.Film;

        return (
            <React.Fragment>
                {/*<h1>{this.idFilm}</h1>*/}
                <h1>{film.name}</h1>
            </React.Fragment>

        );
    }
}
const mapStateToProps = (state) =>{
    const { Film } = state.filmreducer;
    return {
        Film
    };
}
export default connect(
    mapStateToProps
)(Details);

我收到此错误：

TypeError：无法读取未定义的属性“电影”

但是当我从filmAction记录数据时，我正确地获得了响应，但是没有在组件中。

有人可以帮助我吗？

Answer 1

看起来只是一种情况。

在下面找到修复程序

...
render() {
         const { film } = this.props;
         ...
    }
}
const mapStateToProps = (state) =>{
    const { film } = state.filmreducer;
    return {
        film
    };
}

从调度程序获取不确定的结果

1 个答案: