React-Redux mapStateToProps 并没有在任何地方被调用

Question

我正在 react 中处理 flash 消息

const mapStateToProps = state => {
  console.log(state.flashMessages);             <---This
  return {
    messages: state.flashMessages
  };
};
export class FlashMessagesComponent extends Component {
   render(){
     return <h1>Flash</h1>
   }
}
export default connect(mapStateToProps)(FlashMessagesComponent);

将 FlashMessagesComponent 视为在 People 中调用的 flash 消息组件

http://localhost:3000/people              <--works here

import React from 'react';
const People = () =>{
    return (
        <div>
            <FlashMessagesComponent/>
            <h1>People Page</h1>
        </div>
    )
}

export default PeopleDashboard ;

The pointed line logs state of flashMessages

但是

http://localhost:3000/basic          <--not here

const BasicPage = () =>{
    return (
        <div>
            <FlashMessagesComponent/>
            <h1>Basic Page</h1>
        </div>
    )
}

export default  BasicPage;

the pointed line does not log i.e mapStateToProp is not working

Answer 1

因为您导出 FlashMessageComponent 而不是 connected FlashMessageComponent。

改变

export class FlashMessagesComponent extends Component {
   render(){
     return <h1>Flash</h1>
   }
}
connect(mapStateToProps)(FlashMessagesComponent);

到

class FlashMessagesComponent extends Component {
   render(){
     return <h1>Flash</h1>
   }
}
export default connect(mapStateToProps)(FlashMessagesComponent);