时间戳

首页 > 解决方案 > 基于状态的条件渲染

reactjs - 基于状态的条件渲染

问题描述

我想根据状态进行一些条件渲染。我的状态看起来是这样的：

state = {
  text: '',
  properties: {
     someMoreData: [{...}]
  },
  moreData: ''
}

someMoreData我想根据我所在州的属性键中是否存在该字段来进行条件渲染。我当前的代码如下所示：

render () {
     console.log(this.state)
     if('someMoreData' in this.state.properties)
     return (
         <div>
          ..
         </div>
     )
}

React 抛出错误说明Cannot use 'in' operator to search for 'someMoreData' in undefined

如何格式化我的代码，以便如果该someMoreData字段存在，我得到我的 JSX，如果不存在，我呈现一些其他 JSX。

标签： reactjs

解决方案

通常，您只需执行以下操作：

render() {
  return (
    <div>
      {
        this.state.properties.someMoreData && (
          <div>Some other JSX stuff</div>
        )
      }
    </div>
  )
}

但是，Cannot use 'in' operator to search for 'someMoreData' in undefined似乎表明无论出于何种this.state.properties原因undefined。不知道为什么只使用您发布的代码，但我会看看。

推荐阅读