javascript - 数组映射不返回值 react

Question

我有以下功能

  churnModel = () => {
        if (this.props.churnModel === undefined || this.props.churnModel.length === 0) {
          return("N/A")
        } else {
          this.props.churnModel.map((churn) => {
            if (churn === undefined || churn.length === 0) {
              return("N/A")
            } else {
              return(churn.map((model) => {
                this.service(model.scoreModelId)
              }))
            }
          })
        }
  };

this.service 函数看起来像这样......

service(e) {
  switch(e.toString().toLowerCase()) {
    case "in":
      return <span>in</span>
    case "rpt_callr":
      return <span>repeat</span>
    default:
      return <span>na</span>
  }
}

我希望在这里显示结果:

<div className="riskScore">{this.churnModel()}</div>

什么也没有显示，但是当我输入日志时，这些日志就会被打印出来。

这里发生了什么？

Answer 1

您需要将return放在this.props.churnModel.map之前。this.service(model.scoreModelId)

1. 如果没有返回任何内容，函数将返回undefined。
2. map() 接受回调并将数组的每个元素更改为该回调的返回值。如果您不返回任何内容，则所有元素都将未定义

您还可以通过删除 {} 来删除 this.service(model.scoreModelId) 之前的 return。就像这样。

return(churn.map((model) => this.service(model.scoreModelId)))

这是代码

churnModel = () => {
        if (this.props.churnModel === undefined || this.props.churnModel.length === 0) {
          return("N/A")
        } else {
          return this.props.churnModel.map((churn) => {
            if (churn === undefined || churn.length === 0) {
              return("N/A")
            } else {
              return(churn.map((model) => {
                return this.service(model.scoreModelId)
              }))
            }
          })
        }
  };