数组映射不返回值反应

Question

I have the following function

  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)
              }))
            }
          })
        }
  };

The this.service functions looks like this...

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

I am expecting to display the result in here:

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

Nothing gets displayed, but when I put in logs, those get printed.

What is happening here?

Answer 1

you need to put return before this.props.churnModel.map . this.service(model.scoreModelId)

1. A function will return undefined if nothing is nothing is returned.
2. map() takes a callback and changes each element of array to return value of the that callback. If you don't return anything all elements will be undefined

You can also get rid of return before this.service(model.scoreModelId) by removing {} .Like this.

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

Here is the code

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)
              }))
            }
          })
        }
  };

Answer 2

You have to use return statement in couple of lines:

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)
                  }))
                }
              })
            }
      };

Why do you need return? It's because you're using curly braces .