使用Redux从React中的Js文件中获取数据,但没有以正确的格式获取数据?

时间:2019-08-09 04:42:18

标签: javascript redux react-redux

您好,我正在尝试使用google,但我找不到任何解决方案可以解决这个问题,让我知道这是什么以及如何解决这个问题。

我的文件是

courseLists.js

    export const coursesList = [
  {
    id: 1,
    title: "Securing React Apps with Auth0",
    slug: "react-auth0-authentication-security",
    authorId: 1,
    category: "JavaScript"
  },
  {
    id: 2,
    title: "React: The Big Picture",
    slug: "react-big-picture",
    authorId: 1,
    category: "JavaScript"
  },
  {
    id: 3,
    title: "Creating Reusable React Components",
    slug: "react-creating-reusable-components",
    authorId: 1,
    category: "JavaScript"
  },
  {
    id: 4,
    title: "Building a JavaScript Development Environment",
    slug: "javascript-development-environment",
    authorId: 1,
    category: "JavaScript"
  },
  {
    id: 5,
    title: "Building Applications with React and Redux",
    slug: "react-redux-react-router-es6",
    authorId: 1,
    category: "JavaScript"
  },
  {
    id: 6,
    title: "Building Applications in React and Flux",
    slug: "react-flux-building-applications",
    authorId: 1,
    category: "JavaScript"
  },
  {
    id: 7,
    title: "Clean Code: Writing Code for Humans",
    slug: "writing-clean-code-humans",
    authorId: 1,
    category: "Software Practices"
  },
  {
    id: 8,
    title: "Architecting Applications for the Real World",
    slug: "architecting-applications-dotnet",
    authorId: 1,
    category: "Software Architecture"
  },
  {
    id: 9,
    title: "Becoming an Outlier: Reprogramming the Developer Mind",
    slug: "career-reboot-for-developer-mind",
    authorId: 1,
    category: "Career"
  },
  {
    id: 10,
    title: "Web Component Fundamentals",
    slug: "web-components-shadow-dom",
    authorId: 1,
    category: "HTML5"
  }
];

courses_api.js

import * as API_DATA from "./courseList";

let promise = new Promise(function(resolve, reject) {
  var result = API_DATA.coursesList;
  //result = JSON.stringify(result);
  //console.log("////", result);
  return resolve(result);
});

export const loadCourseAPI = function() {
  //debugger;
  return promise;
};

CousreCount.js

import React, { Component, Fragment } from "react";
import { connect } from "react-redux";
import { loadCourse } from "../Redux/Actions/CourseListAction";
import CoursesIndeComp from "../Components/Courses/index";

class CourseComp extends Component {
  constructor() {
    super();
    this.state = {
      name: "About Page "
    };
  }
  componentDidMount() {
    //debugger;
    this.props.dispatch(loadCourse());
  }
  render() {
    console.log("course props", this.props);
    return (
      <Fragment>
        <CoursesIndeComp courses={this.props.MyCoursesList} />
      </Fragment>
    );
  }
}

// const mapDispatchToProps = {
//   loadCourse
// };
const mapStateToProps = state => {
  //debugger;
  return {
    MyCoursesList: state.courses
  };
};

export default connect(mapStateToProps)(CourseComp);

找到控制台日志数据

0:
0: {id: 1, title: "Securing React Apps with Auth0", slug: "react-auth0-authentication-security", authorId: 1, category: "JavaScript"}
1: {id: 2, title: "React: The Big Picture", slug: "react-big-picture", authorId: 1, category: "JavaScript"}
2: {id: 3, title: "Creating Reusable React Components", slug: "react-creating-reusable-components", authorId: 1, category: "JavaScript"}
3: {id: 4, title: "Building a JavaScript Development Environment", slug: "javascript-development-environment", authorId: 1, category: "JavaScript"}
4: {id: 5, title: "Building Applications with React and Redux", slug: "react-redux-react-router-es6", authorId: 1, category: "JavaScript"}
5: {id: 6, title: "Building Applications in React and Flux", slug: "react-flux-building-applications", authorId: 1, category: "JavaScript"}
6: {id: 7, title: "Clean Code: Writing Code for Humans", slug: "writing-clean-code-humans", authorId: 1, category: "Software Practices"}
7: {id: 8, title: "Architecting Applications for the Real World", slug: "architecting-applications-dotnet", authorId: 1, category: "Software Architecture"}
8: {id: 9, title: "Becoming an Outlier: Reprogramming the Developer Mind", slug: "career-reboot-for-developer-mind", authorId: 1, category: "Career"}
9: {id: 10, title: "Web Component Fundamentals", slug: "web-components-shadow-dom", authorId: 1, category: "HTML5"}

我要去哪里

0:
    0:

请让我知道我错了。

0 个答案:

没有答案