React reducer调用两次

Question

我正在为我的应用程序使用react和redux。我的问题是我收到2次我的道具，第一次是未定义的，第二次是好的。所以我不能使用道具。

＆＃13;

＆＃13;

import ...

class Home extends Component {
  
  //some code logic 
  
  render(){
 console.log(this.props.header);
 
 const header = this.props.header;
  
    return (
      <Welcome title={header.title} />
    )
  }

}


const mapStateToProps = (state) => {
  return {
    header: _.find(state.header, { 'page': 'accueil' })
  }
}

export default connect(mapStateToProps)(Home);

＆＃13;

＆＃13;

＆＃13;

console.log给我2个回答：    1 / undefined    2 / obj数组（我需要的）

未捕获的TypeError：无法读取未定义的属性标题

Answer 1

问题很简单。在您定义reducer的情况下，初始状态将设置为var initialState = { id: '', page: '', title: '', metaTitle: '', subtitle: '' } const reducerState = (state = initialState, action) => { ...... //Do what you want here return state } ，这将在第一次返回，稍后在一些处理之后将返回日期。所以你可以做两件事

首先：在reducer中设置初始状态

header.title

第二：检查组件中是否定义了class Home extends Component { //some code logic render(){ console.log(this.props.header); const header = this.props.header; return ( {header.title && <Welcome title={header.title} />} ) } } const mapStateToProps = (state) => { return { header: state.header } } export default connect(mapStateToProps)(Home);

{{1}}