时间戳

首页 > 解决方案 > console.log(this.props.store) 在我的创建反应应用程序中返回未定义？

reactjs - console.log(this.props.store) 在我的创建反应应用程序中返回未定义？

问题描述

我创建了一个创建反应应用程序，并包含了带有卡片列表的 redux 和一个显示过滤结果的搜索框，该应用程序在我添加 redux 之前正在运行，但现在它没有返回任何结果。当我 console.log(this.props.store) 它返回未定义。如果有人可以帮助我，我将不胜感激。我的文件如下：

常量.js

export const CHANGE_SEARCH_FIELD = 'CHANGE_SEARCH_FIELD';

动作.js

import {CHANGE_SEARCH_FIELD} from './constants.js';

export const setSearchField = (text) => ({
       type: CHANGE_SEARCH_FIELD,
       payload: text
})

减速器.js

import {CHANGE_SEARCH_FIELD} from './constants.js';

const intialState = {
    searchField: ''
}

export const searchTeacher = (state=intialState, action={}) => {
    switch(action.type) {
        case CHANGE_SEARCH_FIELD:
                return Object.assign({}, state, { searchField: action.payload });
        default: 
                return state;
    }
}

index.js

import ReactDOM from 'react-dom';
import './index.css';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import App from './App.js'; //Our main parent component
import {searchTeacher} from './reducer.js';
import 'tachyons';
import * as serviceWorker from './serviceWorker';

const store = createStore(searchTeacher)

ReactDOM.render(
     <Provider store={store}>
         <App />
     </Provider>,
  document.getElementById('root') );

serviceWorker.unregister();

应用程序.js

import React, {Component} from 'react';
import {connect} from 'react-redux';
import CardList from './CardList.js';
import {teacher} from './teacher.js';
import Searchbox from './searchbox.js';
import ErrorBoundry from './ErrorBoundry';
import Scroll from './Scroll.js';
import './App.css';
import {setSearchField} from './actions.js';

const mapStateToProps = state => {
    return {
        searchField: state.searchField
    }
}

const mapDispatchToProps = (dispatch) => {

    return {
        onSearchChange: (event) => dispatch(setSearchField(event.target.value))
    }
}

class App extends Component {

    constructor(){   
         super()
         this.state = {
         teacher: teacher, //teacher: [],  
        }
    }

    render(){
        console.log(this.props.store);
        const { searchField, onSearchchange } = this.props; 
        const filteredteacher= teacher.filter( 
            teacher =>{
                         return teacher.name.toLowerCase().includes(searchField.toLowerCase()); 
                      });
        return(
            <div className="tc">  
              <h1 className="f1"> Faculty Members ! </h1>
              <Searchbox searchChange={onSearchchange} /> 
              <Scroll>
                <ErrorBoundry>
                 <CardList teacher={filteredteacher} />
                </ErrorBoundry> 
              </Scroll>
            </div>
        );
    }
}

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

标签： reactjsreact-nativereduxreact-reduxcreate-react-app

解决方案

不会有任何props.store，因为您的代码都没有传递名为store该组件的道具。

封装在connectget props 中的组件来自三个来源，组合起来：

  • 从父组件传递的道具
  • 从返回的道具mapState
  • 从返回的道具mapDispatch

在这种情况下，mapState正在返回{searchField}，并且mapDispatch正在返回{onSearchChange}，并且没有来自父级的道具。所以，组合的道具是{searchField, onSearchChange}.

作为旁注，您应该使用“对象速记”形式mapDispatch而不是将其编写为函数：

const mapDispatch = {onSearchChange: setSearchField};

推荐阅读