Javascript 组件未通过mapStateToProps从Redux存储获取道具

在我的react组件中，我需要从Redux存储中获取状态作为道具并使用它们。我使用的是MapStateTops，它正确地从redux存储获取状态，因为初始值是console.logged正确的。但是，当我使用组件中的所有道具时，它们都是未定义的。我没有进行任何显式异步调用，这似乎是我在前面的问题中发现的问题，因此我不确定为什么我的组件不能访问这些道具

src/components/SearchBar.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import actionType from '../constants/action-types';

class SearchBar extends Component {

  render() {
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={this.props.filterText}
          onChange={this.onTextChange}
        />
        <p>
          <input
            type="checkbox"
            checked={this.props.inStockOnly}
            onChange={this.onInStockCheckedChange}
          />
          {' '}
          Only show products in stock
        </p>
      </form>
    );
  }
}


function mapStateToProps(state) {
    console.log("SearchBar state:", state);

    return {
        filterText: state.filterText,
        showInStockOnly: state.showInStockOnly
    };
}

function mapDispatchToProps(dispatch) {
    return {
        onTextChange: (evt) => {
            const action = {
                type: actionType.UPDATE_ON_TEXT_CHANGE,
                value: evt.target.value
            };
            dispatch(action);
        },

        onInStockCheckedChange: () => {
            const action = {
                type: actionType.SET_IN_STOCK_ONLY_CHECKED,
            };
            dispatch(action);
        }
    };
}

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

import actionType from '../constants/action-types';
import initialState from '../constants/initial-state';


const searchBar = (state = initialState, action) =>{
    console.log('SearchBar reducer running: ', state, action);

    switch (action.type) {

        case actionType.UPDATE_ON_TEXT_CHANGE:
            console.log("Text change action dispatched!")
            return Object.assign({}, state, { filterText: action.value});

        case actionType.SET_IN_STOCK_ONLY_CHECKED:
            console.log("InStockOnly action dispatched!")
            return Object.assign({}, state, { inStockOnly: !state.inStockOnly});

        default:
            return state;
    }
}


export default searchBar;

import { combineReducers } from 'redux';

import searchBar from './searchBar_reducer'


const rootReducer = combineReducers({
    searchBar
});


export default rootReducer;

import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
//import App from './components/App';
import SearchBar from './components/SearchBar'
import rootReducer from './reducers/';

const store = createStore(rootReducer);

const unsubscribe = store.subscribe(() =>
  console.log(store.getState())
)

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

src/reducers/index.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import actionType from '../constants/action-types';

class SearchBar extends Component {

  render() {
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={this.props.filterText}
          onChange={this.onTextChange}
        />
        <p>
          <input
            type="checkbox"
            checked={this.props.inStockOnly}
            onChange={this.onInStockCheckedChange}
          />
          {' '}
          Only show products in stock
        </p>
      </form>
    );
  }
}


function mapStateToProps(state) {
    console.log("SearchBar state:", state);

    return {
        filterText: state.filterText,
        showInStockOnly: state.showInStockOnly
    };
}

function mapDispatchToProps(dispatch) {
    return {
        onTextChange: (evt) => {
            const action = {
                type: actionType.UPDATE_ON_TEXT_CHANGE,
                value: evt.target.value
            };
            dispatch(action);
        },

        onInStockCheckedChange: () => {
            const action = {
                type: actionType.SET_IN_STOCK_ONLY_CHECKED,
            };
            dispatch(action);
        }
    };
}

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

import actionType from '../constants/action-types';
import initialState from '../constants/initial-state';


const searchBar = (state = initialState, action) =>{
    console.log('SearchBar reducer running: ', state, action);

    switch (action.type) {

        case actionType.UPDATE_ON_TEXT_CHANGE:
            console.log("Text change action dispatched!")
            return Object.assign({}, state, { filterText: action.value});

        case actionType.SET_IN_STOCK_ONLY_CHECKED:
            console.log("InStockOnly action dispatched!")
            return Object.assign({}, state, { inStockOnly: !state.inStockOnly});

        default:
            return state;
    }
}


export default searchBar;

import { combineReducers } from 'redux';

import searchBar from './searchBar_reducer'


const rootReducer = combineReducers({
    searchBar
});


export default rootReducer;

import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
//import App from './components/App';
import SearchBar from './components/SearchBar'
import rootReducer from './reducers/';

const store = createStore(rootReducer);

const unsubscribe = store.subscribe(() =>
  console.log(store.getState())
)

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

src/index.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import actionType from '../constants/action-types';

class SearchBar extends Component {

  render() {
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={this.props.filterText}
          onChange={this.onTextChange}
        />
        <p>
          <input
            type="checkbox"
            checked={this.props.inStockOnly}
            onChange={this.onInStockCheckedChange}
          />
          {' '}
          Only show products in stock
        </p>
      </form>
    );
  }
}


function mapStateToProps(state) {
    console.log("SearchBar state:", state);

    return {
        filterText: state.filterText,
        showInStockOnly: state.showInStockOnly
    };
}

function mapDispatchToProps(dispatch) {
    return {
        onTextChange: (evt) => {
            const action = {
                type: actionType.UPDATE_ON_TEXT_CHANGE,
                value: evt.target.value
            };
            dispatch(action);
        },

        onInStockCheckedChange: () => {
            const action = {
                type: actionType.SET_IN_STOCK_ONLY_CHECKED,
            };
            dispatch(action);
        }
    };
}

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

import actionType from '../constants/action-types';
import initialState from '../constants/initial-state';


const searchBar = (state = initialState, action) =>{
    console.log('SearchBar reducer running: ', state, action);

    switch (action.type) {

        case actionType.UPDATE_ON_TEXT_CHANGE:
            console.log("Text change action dispatched!")
            return Object.assign({}, state, { filterText: action.value});

        case actionType.SET_IN_STOCK_ONLY_CHECKED:
            console.log("InStockOnly action dispatched!")
            return Object.assign({}, state, { inStockOnly: !state.inStockOnly});

        default:
            return state;
    }
}


export default searchBar;

import { combineReducers } from 'redux';

import searchBar from './searchBar_reducer'


const rootReducer = combineReducers({
    searchBar
});


export default rootReducer;

import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
//import App from './components/App';
import SearchBar from './components/SearchBar'
import rootReducer from './reducers/';

const store = createStore(rootReducer);

const unsubscribe = store.subscribe(() =>
  console.log(store.getState())
)

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

从“React”导入React；
从'react dom'导入{render}；
从“redux”导入{createStore}；
从'react redux'导入{Provider}；
//从“./components/App”导入应用程序；
从“./components/SearchBar”导入搜索栏
从“./reducers/”导入rootReducer；
const store=createStore（rootReducer）；
const unsubscribe=store.subscribe（（）=>
console.log（store.getState（））
)
渲染(
,
document.getElementById（'root'））
);

这是因为您试图访问

state.filterText

，而此减速机的数据存储在

搜索栏中

，因此您应该使用

state.searchBar.filterText