Question

我有一个getNameByVal函数，我想在组件render（）中调用它，错误消息TypeError：getNameByVal不是函数。我的代码如下。有什么问题吗？：

function getNameByVal(value){
    switch(val){
       case '0000':
         return "Online";
       case '0001':
         return "In person";
       ...
}
class App extends Component{
  ....
  render(){
    return <div>
     {this.state.checkedItems!==null?this.state.checkedItems.map(key=>getNameByVal(key)):[]} 
    </div>
}

Answer 1

您的函数getNameByVal（）似乎超出了render（）的范围。

您可以做的是将函数声明为一个变量，该变量将允许您在Map中调用它。

这是将其声明为变量的方式：

const getNameByVal = (value) => {
    switch(value){
        case '0000':
         return "Online";
        case '0001':
         return "In person";
    }
}

将其放置在您的Rendor（）{...}内或APP /组件的脚架内。然后您可以用相同的方式调用它

Answer 2

将您的函数移入类内，如下所示，并使用this.getNavByVal

进行调用

class App extends Component {
  constuctor(props) {
    super(props)
    this.getNameByVal = this.getNameByVal.bind(this)
  }
  getNameByVal(value){
    switch(val){
       case '0000':
         return "Online";
       case '0001':
         return "In person";
       ...
  }
  render(){
    return <div>
     {this.state.checkedItems!==null?this.state.checkedItems.map(key=>this.getNameByVal(key)):[]} 
    </div>
}

Answer 3

如果我要编写这样的组件，则不会使用类，因此，如果这对您有用，这里是一个如何使用钩子进行操作的示例：https://codesandbox.io/embed/crazy-jones-2398c

在地图函数内部调用函数

3 个答案: