javascript - fetchById 无法在反应中呈现状态,但 console.log 正确呈现状态
问题描述
我有一个简单的反应应用程序,我在其中使用了 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 显示(学生的)旧状态,然后课程状态正确,但未在返回语句中呈现 {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))
}
解决方案
它开始着手将 {course.subject} 更改为 {course[0].subject}
推荐阅读
- jestjs - jest 未定义 - 在 __mocks__ 文件夹中
- c# - 构造函数只能链接在初始化列表中,为什么
- php - 如何仅在 url 编码中对空间进行编码?
- typescript - 在接口中使用索引器的类型名称
- powershell - 在 Powershell 中实现 ForEach 迭代器
- css - flexbox - justify-content 属性的问题
- python - opencensus 出口商 - 一个全局或每个线程?
- python - python collections.Counter 的 C++ 等价物是什么?
- java - 无法在 Intellij 中编译 - 错误:java:从系统模块 jdk.compiler 导出包不允许使用 --release
- excel - 关于在Excel中输入公式的问题