Question

我可以从网站扩展中看到要在redux状态下获取的所有数据，但是，当我想将其拉出以在组件中使用时，它说this.props.rules是未定义的：

这是create-store.js：

import {createStore, applyMiddleware} from 'redux';
import mainReducer from './reducers/main-reducer';
import {composeWithDevTools} from 'redux-devtools-extension';
import thunk from 'redux-thunk';

export default () => {
  return createStore(mainReducer, composeWithDevTools(
    applyMiddleware(thunk)
  ))
}

这是mainReducer.js

import {combineReducers} from 'redux';

import rules from './rules-reducer';

export default combineReducers({
  rules
});

这是规则归约器：

const initialState = {
  allRules: [],
  singleRule: {}
}

export default (state = {}, {type, payload}) => {
  switch(type){
    case 'GET_RULES':
      console.log('got in get_rules reducer');
      return {
        ...state,
        allRules: payload
      }
    default:
      return state;
      }

};

这是getRulesAction：

export const getRulesAction = () => dispatch => {
  console.log('got into getrulesaction');
  const sheets = Object.entries(document.styleSheets);
  let allRules = [];
  for(let i = 0; i < sheets.length; i++){
    const sheet = sheets[i][1];
    const rules = Object.entries(sheet.cssRules);
    for(let j = 0; j < rules.length; j++){
      // console.log(rules[j][1].cssText);
      allRules.push(rules[j][1].cssText);
    }  
  }
  dispatch({
    type: 'GET_RULES',
    payload: allRules
  })
  
};

这是我要显示数据的组件：

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {getRulesAction} from '../actions/ruleActions';

class Rules extends Component {
  componentWillMount() {
    this.props.getRulesAction();
    console.log('props from will mount', this.props);
  }

  render(){
    console.log(this.props.rules);
    const fetchedRules = this.props.rules.map((rule,i) => {
        return <li key={i}>{rule}</li>
    }
    )

    return(
      <div>
        <h2>Component to get rules from the redux store</h2>
        {fetchedRules}
      </div>
    );
  }

}

Rules.propTypes = {
  getRulesAction: PropTypes.func.isRequired,
  rules: PropTypes.array.isRequired,
}

const mapStateToProps = state => ({
  rules: state.rules.allRules
})

export default connect(mapStateToProps, {getRulesAction})(Rules);

Answer 1

错误很可能是由于以下原因。声明状态时，需要初始化状态道具。为此，您可以在首次运行时将默认状态传递给化简器。但是，您的默认状态设置为空对象：

export default (state = {}, {type, payload})

因此，当组件首次渲染时，this.props.rules未定义。为了解决这个问题，您需要使用initialState初始化状态，这将确保this.props.rules是一个数组。

export default (state = initilState, {type, payload})

稍后，当操作被触发时，结果将从更新后的状态中拉出。

无法从Redux存储中获取数据

1 个答案: