fetchById не может отобразить состояние в реакции, но console.log представляет состояние правильно

Question

У меня есть простое приложение для реагирования, в котором я использовал react-redux, ax ios, response-router и функциональные компоненты. Компонент LMSCourseDetails.jsx следующим образом:

import React, { useState, useEffect } from "react";
import {useDispatch,useSelector, useStore} from 'react-redux';
import { Link,useParams,useHistory } from 'react-router-dom';
import * as actions from "../_actions/courseActions";
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
  title: {
    fontSize: 14,
    display: 'flex',
  },
  pos: {
    marginBottom: 12,
  },
  card: {
    padding:10,
    marginTop:10,
    display: 'flex',
    flex:1,
  },
  cardAction: {
    display: 'block',
    textAlign: 'initial'
  },
  cardMedia: {
    width: 160,
  },
});

export default function LMSCourseDetails(props) {  
  const classes = useStyles();
  
 
     let {courseId}=useParams();
    
  const dispatch = useDispatch();
 
  useEffect(() => {
    dispatch(actions.fetchById(courseId));

   }, [])

  
  const course = useSelector(state=>state.course.list)
      
     
        console.log("course type:",typeof(course)); // type is object
  return (
  <div>
<h2> this is course {course.subject}</h2> // subject does not show here why????
</div>

    
  );
}

вот courseReducer. js

import { ACTION_TYPES } from '../_constants';

const initialState = {
    list: []
}


 export const course=(state = initialState, action)=>{

    switch (action.type) {
        case ACTION_TYPES.FETCH_ALL:
            return {
                ...state,
                list: [...action.payload]
            }
        case ACTION_TYPES.FETCH_BY_ID:
            return {
                ...state,
                list: [action.payload]  // i think here is error
            }
          
        default:
            return state
    }
}

courseApi. js для получения данных из бэкэнда выглядит следующим образом:

import axios from "axios";

const baseUrl = "http://localhost:4000/api/"



export default {

    course(url = baseUrl + 'courses/') {
        return {
            fetchAll: () => axios.get(url),
            fetchById: id => axios.get(url + id),
            create: newRecord => axios.post(url, newRecord),
            update: (id, updateRecord) => axios.put(url + id, updateRecord),
            delete: id => axios.delete(url + id)
        }
    }
}

console.log показывает старое состояние (студента), а затем состояние курса правильно, но не отображает {course.subject} в операторе return.

courseActions. js находится ниже:

import courseApi from "../_services/courseApi";
import { ACTION_TYPES } from '../_constants';


const formateData = data => ({
    ...data,
   // age: parseInt(data.age ? data.age : 0)
})

export const fetchAll = () => dispatch => {
      courseApi.course().fetchAll()
        .then(response => {
            
            dispatch({
                type: ACTION_TYPES.FETCH_ALL,
                payload: response.data
            })
        })
        .catch(err => console.log(err))
}
export const fetchById = (id) => dispatch => {
    courseApi.course().fetchById(id)
      .then(response => {
          
          dispatch({
              type: ACTION_TYPES.FETCH_BY_ID,
              payload: response.data
          })
      })
      .catch(err => console.log(err))
}

скриншот console.log здесь

Answer 1

началось изменение {course.subject} на {course [0] .subject}