fetchById 无法在反应中呈现状态，但 console.log 正确呈现状态

Question

我有一个简单的 react 应用程序，我在其中使用了 react-redux 、 axios 、 react-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 显示（学生的）旧状态，然后课程状态正确，但未在 return 语句中呈现 {course.subject}。

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))
}

Answer 1

它开始着手将 {course.subject} 更改为 {course[0].subject}