Javascript React组件忽略显示空obj的文本

我有一个react组件，它有一个方法，从一个对象中读取一些数据，然后在另一个组件上返回关于其状态的文本

问题在于，当应用程序开始加载时，obj长度最初为0，而当加载对象数据时，obj长度随后将为0 更新后，obj.length将大于0

结果是：

Scenario 1 (obj will actually have data) 
      -- App Loading
      -- getTxt checks if obj is empty
      -- As data is not loaded yet on the first call obj.length will return 0 so 'No Data Found' is displayed
      -- Then when the app finishes loading it then updates and the obj.length > 0 so 'Found the data' is displayed

或

我的问题是，如果在加载应用程序并重新检查obj.length后，它返回>然后为0，那么我不想显示第一个“未找到数据”， 但我需要有一个条件，以防在应用程序完成加载数据后，数据仍然=0

代码如下：

import React from 'react'


class MyComponent extends React.Component {

    getTxt() {

        if (this.props.obj.length > 0) {
            return 'Found the data';
        } else if (this.props.obj.length == 0) {
            return 'No Data Found';
        }

            return 'Searching Data'
        }



    render() {
        return <SomeComponent text={this.getTxt()}/>
    }
}


export {MyComponent}

从“React”导入React
类MyComponent扩展了React.Component{
getText（）{
如果（this.props.obj.length>0）{
返回“找到数据”；
}else if（this.props.obj.length==0）{
返回“未找到数据”；
}
返回“搜索数据”
}
render（）{
返回
}
}
导出{MyComponent}

---

我能做些什么来完成这项工作？

正如菲利克斯·克林在评论中所说的那样

你有三种不同的状态

初始状态

没有数据

有一些数据

初始状态将把

数据

道具设置为

null

。接收到数据后，它可能是一个空对象

{}

或一个包含某些信息的对象

我可能会这样写：

class MyComponent extends React.Component {
  getStatus() {
    const { data } = this.props;
    if (data === null) {
      return "Searching data"
    }
    if (Object.keys(data).length === 0) {
      return "No data was found"
    }
    return "Found some data"
  }

  render() {
    return <SomeComponent text={this.getStaus()}/>
  }
}

如果我们将

switch case

语句移动到另一个函数并调用它

loadReducer

，我们可以做得更好。但我会让你决定是否去做

---

请注意Eitan的解决方案。他同时使用

组件didmount

和

组件willupdate

来更新

状态

我同意费利克斯的评论。在功能组件中使用嵌套三元可能会更好。只要更新了组件的道具

obj

，组件就应该更新

export const myComponent = (props) => {
  return (
    <SomeComponent 
      text={ props.obj ?
        props.obj.length > 0 ?
              'Found Data'
            :
              'No Data Found'
          : 
            'Searching'
      }
    />
  )
}

export const myComponent=（道具）=>{
返回(
0 ?
“找到数据”
:
“未找到数据”
: 
“搜索”
}
/>
)
}

---

听起来好像在收到数据之前不想渲染任何东西

当我需要这样做时，我会使用组件状态来跟踪加载状态。安装组件时，将

state.loading

设置为true

componentDidMount() {
  this.setState({loading: true})
}

更新所有内容后，将加载设置为false

componentDidUpdate() {
  if (this.state.loading) {
    this.setState({loading: false})
  }
}

在

render

函数中，根据加载状态有条件地进行渲染

render() {
    const text = this.state.loading ? "Loading..." : this.getTxt()
    return <SomeComponent text={text}/>
}

render（）{
const text=this.state.loading？“正在加载…”：this.getText（）
返回
}

因此，您实际上有三种状态（数据未加载、数据加载且为空、数据加载且为非空），您试图通过两个值（长度===0或长度>0）来表示它们。这是行不通的。引入一个新值：如果

this.props.obj

为

null

，则数据尚未提取。

componentDidMount() {
  this.setState({loading: true})
}

componentDidUpdate() {
  if (this.state.loading) {
    this.setState({loading: false})
  }
}

render() {
    const text = this.state.loading ? "Loading..." : this.getTxt()
    return <SomeComponent text={text}/>
}