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 :( 为了避免这种情况＆＃34;嵌套＆＃34;检查我是否使用了ImmutableJS，然后在我的连接中我会有

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

这将返回undefined post或name is undefined或null：）

Answer 3

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

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

在渲染中我称之为：

 {this.renderCheck()}

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

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

3 个答案: