由于某种原因，mapStateToProps没有映射到道具

我是React/Redux的新手。 Reduce Chrome devtools告诉我，我正在成功创建和修改状态。然而，虽然控制台日志“dah state”运行并令人满意地告诉我，我的状态中有正确的信息，但我并未在此处映射到道具。由于某种原因，mapStateToProps没有映射到道具

我不完全确定我的reducer是否制作正确，但我怀疑这是因为我创建了新状态，即使它没有映射到道具。

我也相当肯定mapStateToProps，在它运行时，不会触发重新呈现

这里是我的相关容器

import React, { Component, PropTypes } from 'react'; 
    import TopicsGrid from '../components/TopicsGrid.jsx'; 
    import { connect } from 'react-redux'; 
    import { fetchTopics } from '../actions/topics'; 
    import Main from '../components/Main.jsx'; 

    class AboutContainer extends React.Component { 
     constructor(props) { 
      super(props); 
      this.state = { 
       topics: [{ 
        title: '', 
        description: '', 
        link: '', 
        src: '', 
        message: '', 
        selected: false, 
        _id: '' 
       }] 
      } 
     } 
     onChange = (action) => { 
      this.props.dispatch(action); 
     } 
     componentDidMount() { 
      fetchTopics(); 
     } 
     componentWillReceiveProps(nextProps) { 
      console.log('nextProps', nextProps) 
      this.setState({ 
       topics: nextProps.topics 
      }) 
     } 
     render() { 
      console.log('PROPS', this.props) 
      return (
       <div className="container"> 
        <TopicsGrid 
        topics={this.state.topics} 
        onChange={this.onChange}/> 
       </div> 
      ); 
     } 
    }; 

    AboutContainer.propTypes = { 
     dispatch: PropTypes.func.isRequired, 
     topics: PropTypes.array.isRequired 
    }; 

    AboutContainer.defaultProps = { 
     state: { 
      topics: [{ 
        title: '', 
        description: '', 
        link: '', 
        src: '', 
        message: '', 
        selected: false, 
        _id: '' 
       }] 
     } 
    }; 

    const mapDispatchToProps = (dispatch) => { 
     return { 
      dispatch: dispatch 
     } 
    } 
    const mapStateToProps = (state) => { 
     console.log('dah state', state) 
     return Object.assign({}, state, { 
      topics: state.topics.topics 
     }) 
    } 

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

这里是我的减速器

import * as types from '../constants/action-types'; 
import * as SectionNames from '../constants/section-names'; 

const initialState = { 
    topics: [] 
} 

export default function about(state = initialState, action) { 
    if (action.section !== SectionNames.TOPICS) { 
     return state; 
    } 

    let mods = {}; 
    switch (action.type) { 
     case types.FETCH_TOPICS_SUCCESS: 
      mods = { 
        topics: action.topics 
       } 
       // return Object.assign({}, state, { 
       // topics: action.topics 
       // }); 
      break; 

     case types.FETCH_TOPICS_ERROR: 
      mods = { 
        topics: action.topics 
       } 
       // return Object.assign({}, state, { 
       //  topics: action.topics 
       // }); 
      break; 

     case types.TOPIC_SELECTED: 
      console.log('selected') 
      //topic can be selected or unselected 
      //only one topic can be selected at once. 
      mods = { 
        topics: action.topics 
       } 
      mods.topics[action.index].selected = true; 
      return Object.assign({}, state, mods); 
      break; 

     case types.TOPIC_UNSELECTED: 
      //topic can be selected or unselected 
      //only one topic can be selected at once. 
      mods = { 
        topics: action.topics 
       } 
      mods.topics[action.index].selected = false 
      break; 
     default: 
      return state; 
    } 

    return Object.assign({}, state, mods); 

}

来源

2017-02-14 mjabraham

你应该在国家的部分只是绘制该组件的用途，否则shouldComponentUpdate中的浅支持检查会比它需要的更频繁地返回true，从而使您的应用程序效率降低。相反，从React.PureComponent扩展，浅层检查已经在你身边。如果您可以提供帮助，请避免将道具分配给组件状态。 –

由于您使用的是mapStateToProps，您可以直接使用道具而不是传递m进入组件状态。

render() { 
    const { topics } = this.props 
    return (
     <div className="container"> 
      <TopicsGrid 
       topics={topics} 
       onChange={this.onChange} 
      /> 
     </div> 
    ); 
}

来源

2017-02-14 04:44:03 mallendeo

@connect(state => ({ 
    data: state.module.data 
    }), {actoionCreators});

使用这个在您的类的顶部，将装点你的等级和地图状态道具

你的模块中

，你必须在action.type切换，在每种情况下，你应该返回在LOAD_SUCCESS状态自定义更改，例如一个对象，你必须返回一个像这样的对象：

return { 
...state, 
loading:false, 
loaded:true, 
data:action.data 
    }

所以终极版都知道，当loadSuccess分派的状态与LOA不会改变丁为false，....

通知，减少应返回状态，当一个未知的动作在默认情况下dispathed所以你应该返回状态

来源

2017-02-14 13:15:49

由于某种原因，mapStateToProps没有映射到道具

回答

相关问题