Or maybe you meant to call this function rather than return it.

Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

同事碰到如上的报错，后来我们讨论出了解决方法，记录如下
业务场景：

数据格式：

const data = [
      { name: '商品1', time: '1000' },
      { name: '商品2', time: '200' },
      { name: '商品3', time: '1000' },
      { name: '商品4', time: '200' }
    ]

如图是一个商品列表，数据中的“time”每秒钟都在变化，所以前台会每500毫秒请求一次。
业务需求：当用户点击了“立即预约”，后台数据的time值==10的时候，需要展示一个弹框，在展示弹框的时候出现了如上报错。
原本的写法：

<p>{item.time==10?this.showModal():''}</p>

//showModal方法
showModal = () => {
  this.setState({
     visible: !this.state.visible
   })
 }

报错：

Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

意思是：无法在现有状态转换期间更新（例如在“render”内）。呈现方法应该是props和state的纯函数。
解析：showModal该方法中执行了this.setState()操作，该操作更新了state之后会重新执行render函数，这样会造成无线循环，导致报错。
有时候也可能会这么写

<p>{item.time==10?()=>this.showModal():''}</p>

报错：

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

意思是：函数作为react子级无效。如果从render返回组件而不是component/>，则可能发生这种情况。或者你想调用这个函数而不是返回它。
解析：我们在元素中调用的方法，不能做类似更新state这类操作（在方法中返回元素是没有问题的）。

需要换一种思路来实现原有的需求

调整后思路如下：在点击“立即预约”的方法(right())中传入time——在right方法请求后台数据成功的时候，调用一个前台自己的倒计时——在倒计时的时候去判断time==10，再去更新state,从而避免了在render函数中去更新state.

以上可能稍微有点乱，其实主要想呈现的就是两个报错的原因以及避免