由於某種原因，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沒有映射到道具

回答

相關問題