Question

我刚刚开始学习反应（我发现它非常令人困惑）我试图让以下页面呈现：

import React, { Component } from "react";
import { connect } from "react-redux";
import Header from '../components/Header';
import { saveRepos } from "../actions/AppActions";


class Search extends React.Component {

  state = {
    search: ""
  };

  searchGithub = () => {
    fetch("https://api.github.com/search/repositories?q=" + this.state.search)
      .then(resp => resp.json())
      .then(respJson => {
        this.props.dispatch(saveRepos(respJson.items));
      });
  };

  handleSubmit = e => {
    e.preventDefault();
    this.searchGithub();
  };

  render() {
    return (
        <div className="container">
          <Header title="Search" />
          <hr />
          <form onSubmit={this.handleSubmit}>
            <input
              type="text"
              placeholder="search"
              value=""
              onChange={search => {
                this.setState({ search: search.target.value });
              }}
            />
            <input type="submit" value="submit" />
          </form>
        </div>
    );
  }
}
const mapStateToProps = state => {
  return {
    repos: state.repos
  };
};

export default connect(mapStateToProps)(Search);

我能够通过将Search构建为const来呈现页面，但是只要我将其转换为类并使用export default connect（mapStateToProps）（Search）;而不是导出默认搜索我开始收到找不到“存储”...错误消息。我不确定这件事应该如何运作。我确实尝试添加一对，但我仍然得到同样的错误。

感谢您的帮助。

乔纳森

注意：原帖有线 onChange = {search2 =＆gt; { this.setState（{search：search.target.value}）;

我已将此更改为 onChange = {search =＆gt; { this.setState（{search：search.target.value}）;

另外，这是我启动项目时启动的main_page.js：

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Provider } from "react-redux";
import { Home, Edit, Search, Github, Mine, About } from "./screens";

const Index = ({ store }) => (
  <Provider store={store}>
    <Router>
      <div>
        <Route path="/" exact={true} component={Home} />
        <Route path="/edit" component={Edit} />
        <Route path="/search" component={Search} />
        <Route path="/github" component={Github} />
        <Route path="/mine" component={Mine} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  </Provider> 
);


render(<Index />, document.getElementById('root'));

Answer 1

确保在您的顶级组件上使用Provider标记，并使用store传递createStore，如下所示的源代码中所示。

这是官方redux文档页面中的一个示例。

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
 
let store = createStore(todoApp)
 
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

https://redux.js.org/basics/usage-with-react#passing-the-store

根据您添加到问题中的代码，store中的const Index = ({ store }) => ( ... )对象为undefined，这就是您收到该错误的原因。您必须使用从store模块导入的createStore创建redux对象。所以你的代码应该是这样的：

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Provider } from "react-redux";
import { createStore } from 'redux'
import reducers from './reducers'
import { Home, Edit, Search, Github, Mine, About } from "./screens";

const store = createStore(reducers)

const Index = () => (
  <Provider store={store}>
    <Router>
      <div>
        <Route path="/" exact={true} component={Home} />
        <Route path="/edit" component={Edit} />
        <Route path="/search" component={Search} />
        <Route path="/github" component={Github} />
        <Route path="/mine" component={Mine} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  </Provider> 
);


render(<Index />, document.getElementById('root'));

Answer 2

您的Index组件需要store道具，而您没有传递它。

const Index = ({ store }) => (...

render(<Index />, document.getElementById('root')); //未通过store

请务必致电createStore并将其作为道具传递。

无法在上下文或道具中找到“商店”

2 个答案: