为啥我的列表项调用了它不应该调用的函数？

Posted 2023-02-22

【中文标题】为啥我的列表项调用了它不应该调用的函数？

【英文标题】：Why is my list item calling functions it should not?为什么我的列表项调用了它不应该调用的函数？

【发布时间】：2019-11-04 06:22:40

【问题描述】：

您好，我在 React Native 中为我的设置页面构建了一个列表组件。 我希望设置页面上的每个组件都有一个功能（在某些情况下没有）。

我创建了一个带有objects 的array，我在其中放置了每个项目属性。

 const list = [
            
              title: 'Change user settings',
              icon: 'account-circle',
              link: 'UserEdit',
              action: this.noFunction()
            ,
            
              title: 'Logout',
              icon: 'exit-to-app',
              link: 'Auth',
              action: this.sessionFunction()
            ,
        ]

现在我有两个列表项，每个项都有自己的函数应用于它们的action 属性。

当我在我的应用程序中按下一个 listItem 时，它会调用这两个函数。

但我只想应用与应用关联的功能。

我该怎么做？我的代码中是什么导致了这个错误？

      noFunction()
        console.log('noFunction')
      

      sessionFunction =() =>  
        console.log('sessionFunction')
        this.deleteSession().then(() => 
          this.props.destroySession();
        )
      

    render() 
        const list = [
            
              title: 'Change user settings',
              icon: 'account-circle',
              link: 'UserEdit',
              action: this.noFunction()
            ,
            
              title: 'Logout',
              icon: 'exit-to-app',
              link: 'Auth',
              action: this.sessionFunction()
            ,
        ]
        return (
            <View>
                
                    list.map((item, i) => (
                    <ListItem
                        key=i
                        title=item.title
                        leftIcon=
                             name: item.icon 
                        
                        onPress=() => 
                          item.action
                          this.props.navigation.navigate(item.link)
                          
                    />
                    ))
                
            </View>
            )
        

    

【问题讨论】：

action: this.sessionFunction() 立即执行该函数，它不会将其分配给action，而是将该函数的结果分配给@ 987654329@。由于sessionFunction 没有return 语句，因此它分配undefined。

【参考方案1】：

只需从函数中删除 ()。

当你有类似action: this.noFunction() 的东西时，你正在执行函数并将其分配给action，所以foo.action 将是从noFunction 调用返回的值（在你的情况下是未定义的，因为noFunction 没有' t返回任何东西）。

如果你像action: this.noFunction 一样传递它，你只传递对函数的引用，然后你可以做foo.action() 并调用noFunction。

【讨论】：

这会导致noFunction 出错，我认为 - undefined is not a function。

谢谢，这似乎有效。我确实需要将 () 添加到 item.action 回调中。让它看起来像 item.action()

【参考方案2】：

您需要删除调用表达式()。