Question

我正在使用React和Redux并遵循教程，但我不能为我的生活找出这个错误。

未捕获的TypeError：this.props.fetchPosts不是函数

我有一个带有actions / index.js的src文件，我有一个components / posts_index.js文件。据我所知，这是这个错误中唯一涉及的两个文件，我不相信mapDispatchToProps实际上是将我的函数放在this.props中，但我不知道为什么。

组件/ posts_index.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import fetchPosts from '../actions/index';

class PostsIndex extends Component {
  componentWillMount() {
    this.props.fetchPosts();
  }

  render() {
    return(
      <div>List of Blog Posts</div>
    )
  }
}

function mapDispatchToProps (dispatch) {
  return bindActionCreators({ fetchPosts }, dispatch);
}

export default connect(null, mapDispatchToProps)(PostsIndex);

动作/ index.js

import axios from 'axios';

export const FETCH_POSTS = 'FETCH_POSTS';

const ROOT_URL = 'http://reduxblog.herokuapp.com/api';
const API_KEY = '?key=hn8y9e7yhvjkw9w887';

export function fetchPosts () {
  const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);

  return {
    type: FETCH_POSTS,
    payload: request
  }
}

非常感谢任何帮助！

Answer 1

而不是：

export function fetchPosts () {....

尝试：

 export default function fetchPosts () {..

Answer 2

在actions / index.js中，更改为导出默认值

＆＃13;

export default function fetchPosts () {
  const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);

  return {
    type: FETCH_POSTS,
    payload: request
  }
}

＆＃13;

或编辑components / posts_index.js中的import语句

＆＃13;

import { fetchPosts } from '../actions/index';

＆＃13;

Answer 3

在index.js中更改您从范围内的导入

执行此操作 import PostsIndex from "./Components/posts_index";

代替此import { PostsIndex } from "./Components/posts_index";

mapDispatchToProps没有将我的函数放入道具中

3 个答案: