我正在遵循此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的源代码,但我确实想了解确切的问题。
答案 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;
}