react里return的问题

Question

首先一个方法,return一个对象：

selectStatus(num) {
    if (num === '1') {
       return  {
        text:'直播预告中',
        num:123
      };

    }
  }

一个接口请求：

.then(res => {
        const { body } = res;
       
        this.setState({
        
          num: body.content.data[0].onlineNum  //string格式,值为'1'
        })
      })
      .catch()

在render方法里渲染时调用：

<div>{this.selectStatus(this.state.num).text}</div>   //为什么这样拿不到text?感觉是两个this的问题。

报错提示：

text is undefind

Answer 1

目前写法没问题
传入1没问题
传入不是1肯定报错都没有返回东西
你这个错是直接渲染对象啊 <div>{this.selectStatus('1')}</div>
你确定你项目写的就是 你问的这代码吗？

Answer 2

你先去看看react child是什么就懂了

Answer 3

我直接这样是可以跑通的

export default class extends React.Component {
    selectStatus(num) {
        if (num === '1') {
            return  {
                text:'直播预告中',
                num:123
            };

        }
    }
    render() {
        return <div>{this.selectStatus('1').text}</div>
    }
}

除非你写的是这样才会报你那个错吧：

return <div>{this.selectStatus('1')}</div>

Answer 4

你不能把 this.selectStatus('1').text作为一个react child，最好的方法是

render() {
    const { text } = this.selectStatus('1');
    return (
        <div>{text}</div>
    ); 
}