道具未使用React-Redux传递给孩子

时间:2020-06-14 03:35:51

标签: javascript reactjs redux react-redux

我正在遵循此tutorial on React-Redux,并且在“ React Redux教程:Redux中的异步操作,天真的方式”部分的第一部分偶然发现了错误。


    Post.componentDidMount
    src/js/components/Posts.js:12
       9 | 
      10 | componentDidMount() {
      11 |   // calling the new action creator
    > 12 |   this.props.getData();
         | ^  13 | }
      14 | 
      15 | render() {

我的理解是,商店中的道具不会从 App 组件传递到 Posts 组件。我已经重复了几次步骤,但是仍然看不到确切的罪魁祸首。来自Git的源代码工作正常。我注意到,本地和GIT仓库之间存在差异。

这是我的package.json

    {
      "name": "react-redux-study",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.5.0",
        "@testing-library/user-event": "^7.2.1",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-scripts": "3.4.1"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "devDependencies": {
        "react-redux": "^7.2.0",
        "redux": "^4.0.5"
      }
    }


这是Git仓库中的package.json

更新:添加了我的App.js和Posts.js App.js


    import React from "react";
    import List from "./List";
    import Form from "./Form";
    import { Post } from "./Posts";

    const App = () => (
      <>
        <div>
          <h2>Articles</h2>
          <List />
        </div>
        <div>
          <h2>Add a new article</h2>
          <Form />
        </div>
        <div>
          <h2>API posts</h2>
          <Post />
        </div>
      </>
    );

    export default App;

Posts.js


    import React, { Component } from "react";
    import { connect } from "react-redux";
    import { getData } from "../actions/index";

    export class Post extends Component {
      constructor(props) {
        super(props);
      }

      componentDidMount() {
        // calling the new action creator
        this.props.getData();
      }

      render() {
        return null;
      }
    }

    export default connect(
      null,
      { getData }
    )(Post);

我实际上可以继续使用Git的源代码,但我确实想了解确切的问题。

2 个答案:

答案 0 :(得分:2)

问题:

// posts.js
export class Post extends Component { // <---- First : Export
   ...
}

export default connect( // <----- Second : Export 
  null,
  { getData }
)(Post);


// inside app.js
// you are importing first import, not the default which is connecting to you store
import { Post } from "./Posts";

解决方案:

更改此行

import { Post } from "./Posts";

收件人

// import the default one
import Post from "./Posts";

答案 1 :(得分:0)

应用内组件

<Post getData={postdata} />

在“帖子”组件中,您可以获取这样的数据。

  componentDidMount() {
  let posts=this.props.getData;
}