我正在尝试测试我的 Reactsupersquadapp"并收到以下错误.
未捕获的错误:无法在Connect(CharacterList)"的上下文或道具中找到store".要么将根组件包装在 a 中，要么将store"作为道具显式传递给Connect(CharacterList)".
characterlist.js
import React, { Component } from 'react';从'react-redux'导入{连接}；类 CharacterList 扩展组件 {使成为() {console.log('this.props', this.props);返回 (<div><h4>字符</h4>)}}函数 mapStateToProps(state) {返回 {字符:state.characters}}导出默认连接(mapStateToProps，null)(CharacterList)；
app.js
import React, {Component} from 'react';从 './CharacterList' 导入 CharacterList；类 App 扩展组件 {使成为() {返回 (<div><h2>超级小队</h2><角色列表/>)}}导出默认应用程序；
index.js
从'react'导入React；从 'react-dom' 导入 ReactDOM；从'./Components/App'导入应用程序；从'redux'导入{createStore}；从'react-redux'导入{提供者}；从'./reducers'导入rootReducers；导入 { addCharacterById } from './actions';const store = createStore(rootReducers);console.log(store.getState());store.subscribe(() => console.log('store',store.getState()))store.dispatch(addCharacterById(3));ReactDOM.render(<提供者><应用程序/></提供者>,document.getElementById('root'))character.js(在reducers文件夹中)
import characters_json from '../Data/characters.json';从 '../actions' 导入 { ADD_CHARACTER };功能字符(状态 = characters_json，动作){开关(动作.类型){案例ADD_CHARACTER:let characters = state.filter(item => item.id !== action.id);返回字符；默认:返回状态；}}导出默认字符；heroes.js(reducers 文件夹)
import { ADD_CHARACTER } from '../actions';从 './helper' 导入 {createCharacter}；功能英雄(状态= []，动作){开关(动作.类型){案例ADD_CHARACTER:让英雄 = [...state, createCharacter(action.id)];英雄归来；默认:返回状态；}}导出默认英雄；helper.js(reducers 文件夹)
import characters_json from '../Data/characters.json';导出函数 createCharacter(id) {让 character = characters_json.find(c => c.id === id);返回字符；}index.js(reducers 文件夹)
import { combineReducers } from 'redux';从'./characters_reducer'导入字符；从'./heroes_reducer'导入英雄；const rootReducer = combineReducers({人物，英雄})导出默认的 rootReducer；index.js(动作文件夹)
export const ADD_CHARACTER = 'ADD_CHARACTER';导出函数 addCharacterById(id) {常量动作 = {类型:ADD_CHARACTER，ID}返回动作；}组件出现上述错误:
在 Connect(CharacterList) 中(在 App.js:9)
在 div 中(在 App.js:7 处)
在应用程序中(在 index.js:19)
在提供者中(在 index.js:18)
请帮帮我...?
必须将 store 实例传递给 Provider...
ReactDOM.render(<提供者商店={商店}><应用程序/></提供者>, document.getElementById('root'))I am trying to test my React "supersquadapp" and getting the following error.
Uncaught Error: Could not find "store" in either the context or props of "Connect(CharacterList)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(CharacterList)".
characterlist.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
class CharacterList extends Component {
render() {
console.log('this.props', this.props);
return (
<div>
<h4>characters</h4>
</div>
)
}
}
function mapStateToProps(state) {
return {
characters: state.characters
}
}
export default connect(mapStateToProps, null)(CharacterList);
app.js
import React, {Component} from 'react';
import CharacterList from './CharacterList';
class App extends Component {
render() {
return (
<div>
<h2>SUPER SQUAD</h2>
<CharacterList />
</div>
)
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './Components/App';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducers from './reducers';
import { addCharacterById } from './actions';
const store = createStore(rootReducers);
console.log(store.getState());
store.subscribe(() => console.log('store',store.getState()))
store.dispatch(addCharacterById(3));
ReactDOM.render(
<Provider>
<App />
</Provider>
,document.getElementById('root')
)
character.js(in reducers folder)
import characters_json from '../Data/characters.json';
import { ADD_CHARACTER } from '../actions';
function characters(state = characters_json, action) {
switch(action.type) {
case ADD_CHARACTER:
let characters = state.filter(item => item.id !== action.id);
return characters;
default:
return state;
}
}
export default characters;
heroes.js(reducers folder)
import { ADD_CHARACTER } from '../actions';
import {createCharacter} from './helper';
function heroes(state = [], action) {
switch(action.type) {
case ADD_CHARACTER:
let heroes = [...state, createCharacter(action.id)];
return heroes;
default:
return state;
}
}
export default heroes;
helper.js(reducers folder)
import characters_json from '../Data/characters.json';
export function createCharacter(id) {
let character = characters_json.find(c => c.id === id);
return character;
}
index.js(reducers folder)
import { combineReducers } from 'redux';
import characters from './characters_reducer';
import heroes from './heroes_reducer';
const rootReducer = combineReducers({
characters,
heroes
})
export default rootReducer;
index.js(action folder)
export const ADD_CHARACTER = 'ADD_CHARACTER';
export function addCharacterById(id) {
const action = {
type:ADD_CHARACTER,
id
}
return action;
}
The above error occurred in the component:
in Connect(CharacterList) (at App.js:9)
in div (at App.js:7)
in App (at index.js:19)
in Provider (at index.js:18)
please help me...?
You must pass the store instance to Provider...
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root')
)
这篇关于要么将根组件包装在 <Provider> 中，要么显式传递“store";作为“Connect(CharacterList)"的道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！