无法访问由Redux MapStateToProps修改的React道具

Question

尝试访问this.props.state值时未定义

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';

const mapStateToProps = ({ movies }) => ({
  state: movies,
});

class App extends Component {

  componentDidMount() {
    this.props.addMovie({ title: 'Movie' }); //redux action
  }

  render() {
    const { state } = this.props;
    console.log(state.test);       //Object {title: "Movie"}
    console.log(state.test.title); //Uncaught TypeError: Cannot read property 'title' of undefined
    return (
      <div>Hello {state.test.title}!</div> //doesn't work
    );
  }
}

export default connect(mapStateToProps, actions)(App);

在redux完成动作之后，我在组件道具中有了状态对象

我可以从Chrome DevTools $r.props.state.test.title访问它，但不能从渲染功能访问它

例如，我可以从this.props.params.movieID获取值，但无法获取由mapStateToProps修改的任何参数

如何将this.props.state.test.title值放入div？

Answer 1

在渲染函数内部，检查标题是否未定义，因为在解析redux操作之前已调用了渲染函数。 更新状态并渲染组件后，状态将第二次显示。

render() {
  const { state } = this.props;
  console.log(state.test);
 if(state.test && state.test.title){
   console.log(state.test.title); 
    return (
     <div>Hello {state.test.title}!</div>
   )
} else {
   return (
    <div>No movies listed</div>
  );
 }
}