Object(...) 不是函数

Question

我通过遵循一些教程来学习 redux。在这里我收到一个错误

Object(...) 不是函数

在这一行

export default connect(null, { fetchPosts } )(Posts);

以下容器的

import React, { Component } from 'react';
import { connect } from 'react'
import axios from 'axios';
import { fetchPosts } from '../actions/postActions.js';

class Posts extends Component {
  componentWillMount() {
    this.props.fetchPosts();
  }
  render() {
    const postItems = this.state.posts.map(el => {
      return (
        <div key={el.id}>
        <h3>{el.title} </h3>
        <p>{el.body} </p>
        </div>
      )
    })
    return (
      <div>
      <h1> Posts </h1>
      {postItems}
      </div>
    );
  }

}

export default connect(null, { fetchPosts } )(Posts);

Ps：我知道它也会抛出地图错误，但我目前并不担心。

因为它说Object(...) 不是一个函数并标记了行导出，所以我们在导出中唯一的对象是 fetchPosts ，它看起来像这样（它是一个动作函数）

import { FETCH_POST, NEW_POST } from './type.js'
import axios from 'axios';

export const fetchPosts = () => {
  return function (dispatch) {
    axios.get("https://jsonplaceholder.typicode.com/posts").then((response) => dispatch({
      type: FETCH_POST,
      payload: response
    }))
  }

}

由于我不确定相同的相关代码，fetchPosts 将一个动作分派到以下减速器

    import { FETCH_POST, NEW_POST } from '../actions/type.js'
const initialState = {
  items: [],
  item: {}
}
    export default function(state = initialState, action) {
  switch (action.type) {
    case FETCH_POST:
      return {
        ...state,
        items: action.payload
      }
      default:
        return state
  }

}

稍后在我们的 rootreducer.js 文件中使用 combineReducers 进行组合（然后将其导入我们创建 store 的 store.js）

谁能告诉我我做错了什么，我们该如何解决？

Answer 1

React 没有命名connect导出，它属于react-redux. 所以，你应该像这样导入它：

import { connect } from "react-redux";