Javascript Ruby-on-Rails和React"；TypeError:对象（…）不是函数；错误

我是RubyonRails的新手，但对ReactJs有问题。我尝试使用React路由器DOM和Redux，但出现了错误。“导出默认连接（structureSelector，mapDispatchToProps）（HelloWorld）；”时出现错误之一。你知道这个问题吗

错误消息

TypeError: Object(...) is not a function
    at Module../app/javascript/components/HelloWorld.js (HelloWorld.js:45)
    at __webpack_require__ (bootstrap:19)
    at webpackContext (.*$:11)
    at fromRequireContext.js:13
    at Object.getConstructor (fromRequireContextWithGlobalFallback.js:15)
    at Object.mountComponents (index.js:89)
    at HTMLDocument../node_modules/react_ujs/react_ujs/index.js.ReactRailsUJS.handleMount (index.js:149)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
ReferenceError: HelloWorld is not defined
    at eval (eval at ./node_modules/react_ujs/react_ujs/src/getConstructor/fromGlobal.js.module.exports (fromGlobal.js:12), <anonymous>:1:1)
    at ./node_modules/react_ujs/react_ujs/src/getConstructor/fromGlobal.js.module.exports (fromGlobal.js:12)
    at Object.getConstructor (fromRequireContextWithGlobalFallback.js:19)
    at Object.mountComponents (index.js:89)
    at HTMLDocument../node_modules/react_ujs/react_ujs/index.js.ReactRailsUJS.handleMount (index.js:149)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872
ncaught Error: Cannot find component: 'HelloWorld'. Make sure your component is available to render.
    at Object.mountComponents (index.js:103)
    at HTMLDocument../node_modules/react_ujs/react_ujs/index.js.ReactRailsUJS.handleMount (index.js:149)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872

路由器.rb

configureStore.js

HelloWorld.js

import React，{useState}来自“React”
从“道具类型”导入道具类型
从“react redux/lib/connect/connect”导入{connect}
从“重新选择”导入{createStructuredSelector}；
const GET_REQUEST='GET REQUEST'；
函数getThings（）{
返回{
类型：获取请求
};
};
类HelloWorld扩展了React.Component{
render（）{
返回(
问候语：{this.props.Greeting}
{/*添加按钮*/}
this.props.getThings（）
}>得到东西
);
}
}
HelloWorld.propTypes={
问候语：PropTypes.string
};
const structureSelector=createStructuredSelector({
事物：state=>state.things，
});
常量mapDispatchToProps={getThings}；
导出默认连接（structureSelector，mapDispatchToProps）（HelloWorld）；

App.js

从“React”导入React
从“道具类型”导入道具类型
从“/HelloWorld”导入HelloWorld；
从“react router dom”导入{BrowserRouter，Switch，Route}；
从“react redux”导入{Provider}；
从“./configureStore”导入配置存储；
const store=configureStore（）；
类应用程序扩展了React.Component{
render（）{
返回(
//使用提供商在应用程序中安装Redux
（“家”）}>
}>
);
}
}
导出默认应用程序

index.html.erb

//
//

将import{connect}从“react redux”更改为import之后

未捕获不变冲突：在“Connect（HelloWorld）”上下文中找不到“store”。将根组件包装在中，或者在连接选项中将自定义的React上下文提供程序传递给和相应的React上下文使用者以进行连接（HelloWorld）。
at不变量(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:3710:15）
在连接函数处(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:37392:55）
在renderWithHooks(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:25350:22）
在updateFunctionComponent(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:27396:24）
在UpdateSimpleMemo组件中(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:27336:14）
在UpdateMoComponent(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:27241:18）
开始工作时1美元(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:29269:20）
在HtmlUnknowneElement.callCallback(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:9369:18）
在Object.invokeGuardedCallbackDev(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:9418:20）
在invokeGuardedCallback(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:9471:35）
react dom.development.js:21838组件中出现上述错误：
在连接功能中
考虑将错误边界添加到树中以自定义错误处理行为。
访问/反应错误边界以了解有关错误边界的更多信息。
logCapturedError@react dom.development.js:21838
react dom.development.js:25204未捕获不变冲突：在“Connect（HelloWorld）”上下文中找不到“store”。将根组件包装在中，或者在连接选项中将自定义的React上下文提供程序传递给和相应的React上下文使用者以进行连接（HelloWorld）。
at不变量(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:3710:15）
在连接函数处(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:37392:55）
在renderWithHooks(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:25350:22）
在updateFunctionComponent(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:27396:24）
在UpdateSimpleMemo组件中(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:27336:14）
在UpdateMoComponent(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:27241:18）
开始工作时1美元(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:29269:20）
在HtmlUnknowneElement.callCallback(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:9369:18）
在Object.invokeGuardedCallbackDev(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:9418:20）
在invokeGuardedCallback(http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:9471:35）

如评论中所述，我在提供的github repo中尝试过，导入是错误的。

工艺

从“react redux/lib/connect/connect”导入{connect}

致：

从'react redux'导入{connect}

它将修正这个错误，并且应该足以回答这个问题，以下是作为礼貌的奖励

奖金部分 然后，您的代码中将开始出现其他与提供程序相关的错误，这是由于视图文件引起的，该文件如下所示：

// <%= react_component("HelloWorld", { greeting: "previous index"}) %>
//
<%= react_component("App")%>

//
//

这里有两个问题：

/

在erb（ruby）中不是有效的注释，请使用

#

进行注释，或删除所有行。应用程序运行良好

如果您想在不渲染应用程序的情况下渲染

HelloWorld

组件，那么您需要在

HelloWorld

组件中提供特定的存储，这不是本文的主题，也不是要解释的内容，因此，这是关于使用redux/store/provider等的基础<

Rails.application.routes.draw do
  root 'static#index'
  namespace :v1, defaults: { format: 'json'} do
    get 'things' => 'things#index'
  end

  get '*page' => 'static#index', constraints: -> (req) do
    !req.xhr? && req.format.html?
  end
end

// Redux
import { createStore } from "redux";
import React from "react"

const initialState = {
    things: []
};

function rootReducer(state, action) {
    console.log(action.type);
    switch (action.type) {
        default:
            return state
    }
}

export default class configureStore extends React.Component {
    render() {
        //createStore(reducer, preloadedState)
        const store = createStore(rootReducer, initialState);
        return store;
    }
}

import React, {useState} from "react"
import PropTypes from "prop-types"
import {connect} from "react-redux/lib/connect/connect"
import { createStructuredSelector } from "reselect";

const GET_REQUEST = 'Get request';

function getThings() {
  return {
    type: GET_REQUEST
  };
};

class HelloWorld extends React.Component {
  render() {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}

        {/* adding button */}
        <button className="getThingsBtn" onClick={() => 
          this.props.getThings()
        }>Get Things</button>
      </React.Fragment>
    );
  }
}
HelloWorld.propTypes = {
  greeting: PropTypes.string
};

const structureSelector = createStructuredSelector({
  things: state => state.things,
});

const mapDispatchToProps = { getThings };
export default connect(structureSelector, mapDispatchToProps)(HelloWorld);

import React from "react"
import PropTypes from "prop-types"
import HelloWorld from "./HelloWorld";
import { BrowserRouter, Switch, Route } from "react-router-dom";

import { Provider } from "react-redux";
import configureStore from "../configureStore";
const store = configureStore();

class App extends React.Component {
  render() {
    return (
      // Redux installed in your app with Provider
      <Provider store={store}>
        <BrowserRouter>
          <Switch>
            <Route exact path="/" render={() => ("Home")}></Route>
            <Route exact path="/hello" render={() => <HelloWorld greeting="App component" />}></Route>
          </Switch>
        </BrowserRouter>
      </Provider>
    );
  }
}

export default App

// <%= react_component("HelloWorld", { greeting: "previous index"}) %>
//
<%= react_component("App")%>

Uncaught Invariant Violation: Could not find "store" in the context of "Connect(HelloWorld)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(HelloWorld) in connect options.
    at invariant (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:3710:15)
    at ConnectFunction (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:37392:55)
    at renderWithHooks (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:25350:22)
    at updateFunctionComponent (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:27396:24)
    at updateSimpleMemoComponent (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:27336:14)
    at updateMemoComponent (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:27241:18)
    at beginWork$1 (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:29269:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:9369:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:9418:20)
    at invokeGuardedCallback (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:9471:35)
react-dom.development.js:21838 The above error occurred in the <ConnectFunction> component:
    in ConnectFunction

Consider adding an error boundary to your tree to customize error handling behavior.
Visit /react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:21838
react-dom.development.js:25204 Uncaught Invariant Violation: Could not find "store" in the context of "Connect(HelloWorld)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(HelloWorld) in connect options.
    at invariant (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:3710:15)
    at ConnectFunction (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:37392:55)
    at renderWithHooks (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:25350:22)
    at updateFunctionComponent (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:27396:24)
    at updateSimpleMemoComponent (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:27336:14)
    at updateMemoComponent (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:27241:18)
    at beginWork$1 (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:29269:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:9369:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:9418:20)
    at invokeGuardedCallback (http://localhost:3000/packs/js/application-bb3c5d4bd7a041206dc3.js:9471:35)

// <%= react_component("HelloWorld", { greeting: "previous index"}) %>
//
<%= react_component("App")%>