Question

大家好，我遇到了这个问题，现在无法解决。现在，我真的需要我的应用程序在启动时可以调用一些api，以便将所有逻辑从根目录移到该应用程序。有人知道发生了什么吗？

index.js

    import React from 'react'
import ReactDOM, {render} from "react-dom";
import App from './App';
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import rootReducer from "./store/rootReducer";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import thunk from "redux-thunk";
import { save } from "redux-localstorage-simple";
//CONSTS
const css = require("./App.scss");
const middlewares = [thunk];
import { composeWithDevTools } from "redux-devtools-extension";
const store = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(...middlewares, save()))
  );
const RootApp = () => (
    <Provider store={ store }>
        <Router>
            <App />
        </Router>
    </Provider>
)
ReactDOM.render(<RootApp />, document.getElementById('App'));

App.js

 // IMPORTS
import React, { Component, Fragment } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomeComponent from "./pages/Home.js";
import DetailComponent from "./pages/Detail.js";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { getItems } from "./store/actions";
class App extends Component {

  async componentDidMount() {
    await getItems()
    //this.setState({ items });
  }
  render() {
    return (
      <Fragment>
        <Switch>
          <Route exact path="/" component={HomeComponent} />
          <Route exact path="/:id" component={DetailComponent} />
        </Switch>
      </Fragment>
    );
  }
}
const mapStateToProps = state => ({});

const mapDispatchToProps = dispatch =>
  bindActionCreators({getItems},dispatch);

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

html

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>

<body>

        <div id='App'>
        </div>

</body>

</html>

我遇到此错误

browser.js：38未捕获的错误：在“ Connect（App）”的上下文或道具中找不到“商店”。将根组件包装在中，或者将“存储”作为道具明确传递给“ Connect（App）”。

Answer 1

看起来您实际上并未使用正确的渲染：

您的代码

您不会呈现由Provider包裹的应用程序，也不会Router而是直接App呈现（检查您的ReactDOM.render(...)行）；
您正在尝试将React应用程序安装在非DOM元素上...（同一行，第二个参数）。

// lots of imports ...

import ReactDOM, {render} from "react-dom";

// You mount App here...
// On something that should have an id `App` in your DOM...
ReactDOM.render(<App />, document.getElementById('App'));

// Then you create your store... But it's too late already!

//CONSTS
const css = require("./App.scss");
const middlewares = [thunk];
import { composeWithDevTools } from "redux-devtools-extension";
const store = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(...middlewares, save()))
  );


render(
    <Provider store={ store }>
        <Router>
            <App />
        </Router>
    </Provider>
);

修复

您可以尝试以下操作：

// ... Imports and stuff

const store = createStore( /* ... and stuff again ... */ );

const RootApp = () => (
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>
);

ReactDOM.render(<RootApp />, document.getElementById('react-root'));

// And would probably be a good idea that this line is
// the last one of your file.

在您的index.html中：

<body>
  <div id="react-root"></div>

  <!-- other stuff ... -->
</body>

在任何上下文中都找不到“商店”

1 个答案:

您的代码

修复