在函数中访问Redux状态对象属性

Question

我的反应组件设置中有一个内联函数，如下所示：

render() {
    const { post } = this.props;

    return (
        <div>
            {function(){
                if ({post}) {
                    return <h1>Post name exists {post.name}</h1>
                } else {
                    return <h1> Post name does not exist</h1>
                }
            }.call(this)}
     .....

我有这样设置redux状态：

function mapStateToProps(state) {
    return { 
        post:state.post.single,
    };
}

上面的代码有效，但是我真正要检查的是post.name是否为null，在这种情况下，我在页面上呈现了不同的内容。 但是，执行此操作时，我总是收到错误消息：

if({post.name})

Answer 1

您试图在if内提取对象的值，但是您不能这样做，例如：

function something(post){
  if({ post.name })
  {

  }

}

甚至

function something(post){
  if({ post})
  {

  }

}

无效的js，您可以在babel repl中进行检查

你能做的是

const { post : { name } } = this.props;

然后检查if(name)

Answer 2

嗨，如果必须进行测试，请使用renderCheck函数是一种不错的方法。 但是您必须仔细检查props.post和props.post.name :(为避免此“嵌套”检查，我正在使用ImmutableJS，然后在连接中

name: state.getIn(['post'], ['name'])

这将返回未定义的帖子或名称未定义或为null的:)

Answer 3

我设法通过调用函数而不是进行内联调用来使其工作：

renderCheck(){
    if(this.props.post.name){
      return (
        <div>
          ....
        </div>
      )
    }
 }

在渲染器中，我这样称呼它：

 {this.renderCheck()}

我仍然不确定为什么const {post：{name}} = this.props; 没用，但我现在将使用它。