Состояние передачи редуктора в качестве реквизита в компоненте

Question

Мой Редуктор и Действия работают нормально, и я регистрирую свои данные через, но мои журналы в компоненте, где я потребляю, мое состояние редукторов возвращает реквизиты как [объектный объект], я уверен, что я не регистрирую это правильно или не читаюJSON в правильном формате.Вот код:

reportReducer.js

import { GET_REPORTS, GET_REPORT_BY_ID } from '../actions/types';
const initialState = {
    reports: [],
    report: {}
};

export default function(state = initialState, action) {
    switch (action.type) {
        case GET_REPORTS:
            return {
                ...state,
                reports: action.payload
            };
        case GET_REPORT_BY_ID:
            return {
                ...state,
                report: action.payload
            };
        default:
            return state;
    }
}

reportActions.js

import {GET_REPORTS, GET_REPORT_BY_ID} from './types';
import axios from 'axios';

export const getReports = () => async dispatch => {
    const res = await axios.get(`/api/report`);
    dispatch({
        type: GET_REPORTS,
        payload: res.data
    });
};

export const getReportById = id => async dispatch => {
    const res = await axios.get(`api/report/${id}`);
    console.log(res.data);
    dispatch({
        type: GET_REPORT_BY_ID,
        payload: res.data
    });
};

ReportById.jsx

import React, {Component} from 'react';
import {getReportById} from '../../actions/reportActions';
import {connect} from 'react-redux';

class ReportById extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount = async () => {
        this.props.getReportById(this.props.match.params.id);
    };

    render() {
          console.log(this.props.match.params.id);
          console.log(this.props);   \\this gives [object object]


        return (
            <div>
                <div>
                   <ul>
                    {report && report.title && (
                       <li > {report.title} | {report.assetType} </li>
                                )}
                        </ul>
                </div>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    reports: state.report.reports,
    report: state.report.report
});

export default connect(mapStateToProps, {getReportById})(ReportById);

Answer 1

Печать объекта с помощью console.log всегда будет печатать [object Object].Это происходит потому, что console.log попытается преобразовать свои аргументы в строку, вызвав для них toString.

Если вам нужно напечатать объект, попробуйте что-то вроде этого:

console.log(JSON.stringify(this.props, null, 2));

Вы можете пропустить второй и третий аргументы для строкового преобразования, если вам подходит неформатированный JSON.

Обратите внимание, что это не сработает, если вы передаете какой-либо круглый объект в подпорках.

Answer 2

ваш редуктор - GET_ASSET_BY_ID, а ваше действие - GET_REPORT_BY_ID