Javascript 反应自然<；ListItem onPress={…}>；-为什么要执行此函数？

我刚刚开始考虑React Native，我正在使用Redux管理

状态

，它是我的UI组件的首选，并且正在处理视图之间的导航

目前，我正在构建一个基本列表，它是由

guest

对象数组创建的。列表存储在Redux存储中，我可以访问它并相应地显示。列表中的每个项目都与

来宾

数组中的

来宾

关联。我想让列表中的每个项目都可以触摸，然后将相关的

guest

对象作为属性传递给下一个视图以显示详细信息

为此，我使用了

onPress

函数，这是与

ListItem

组件相关联的标准函数（请参阅NativeBase文档）。我还遵循了

react native router flux

，并在组件本身之外定义了导航操作，以便

ListItem

在按下时调用它，而不是每次渲染时调用它

我的问题是，我发现每次呈现

ListItem

时都会调用

onPress={goToView2（guest）}

函数，而不是在按下

ListItem

时

我肯定我遗漏了一些简单的东西。有什么建议吗

View1.js-显示

来宾初始列表的视图

：

import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon,
  Text, List, ListItem } from 'native-base';
import { connect } from 'react-redux';
import { Actions as NavigationActions } from 'react-native-router-flux';

class View1 extends Component {
  render() {

    // This is the function that runs every time a ListItem component is rendered. 
    // Why is this not only running on onPress?

    const goToView2 = (guest) => {
      NavigationActions.view2(guest);
      console.log('Navigation router run...');
    };

    return (
      <Container>
        <Header>
          <Title>Header</Title>
        </Header>


        <Content>
          <List
            dataArray={this.props.guests}
            renderRow={(guest) =>
              <ListItem button onPress={goToView2(guest)}>
                <Text>{guest.name}</Text>
                <Text note>{guest.email}</Text>
              </ListItem>
            }
          >
          </List>
        </Content>

        <Footer>
          <FooterTab>
            <Button transparent>
              <Icon name='ios-call' />
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}

const mapStateToProps = state => {
  console.log('mapStateToProps state', state);
  return { guests: state.guests };
};

export default connect(mapStateToProps)(View1);

尝试执行

{goToView2（guest）}}

const goToView2=（guest）=>{
导航操作。视图2（来宾）；
log（'导航路由器运行…'）；
};

---

如果在函数中使用箭头函数，那么它就是这个。goToView2（guest）…在渲染方法中写入箭头函数会导致性能问题…即使它可以忽略不计，最好避免它

Legend！我绞尽脑汁已经很久了。。。为什么我输入的方式不起作用？@oldo.nicho我们正在那里传递回调。如果不执行该函数而像onPress={goToView}那样执行，那么它就可以工作。但是，当需要传递参数时，应该执行一个函数，该函数将使用所需的参数执行函数。如果解释不好，我很抱歉，这里已经很晚了。）谢谢@philippsh我有很多东西要学，stackoverflow社区愿意帮助我，这让我大吃一惊。您编写的内容很有意义，我将对此进行更深入的研究。为了更清楚，我解释的方式是，您在呈现ListItem时说，调用函数goToView2，并将返回值传递给back ListItem，以便在按下时调用。这就是为什么它一直被自己调用，即使它没有被按下。如果它可以忽略，为什么要避免它？你能链接到证据吗？因为当渲染函数中此类函数的数量增加时，它会增加并减慢应用程序，我还遇到了在render方法中使用arrow函数导致无限函数调用的问题，我认为这是不对的。如果你一遍又一遍地调用这个函数，并且它试图重新渲染，这是一个问题，那么这很好。但是您还没有解释箭头语法有问题的原因

import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon,
  Text, List, ListItem } from 'native-base';

class View2 extends Component {
    render() {
        console.log('View2 props: ', this.props);

        return (
            <Container>
                <Header>
                    <Title>Header</Title>
                </Header>

                <Content>
                <Content>
                <List>
                    <ListItem>
                        <Text>{this.props.name}</Text>
                    </ListItem>
                </List>
            </Content>
                </Content>

                <Footer>
                    <FooterTab>
                        <Button transparent>
                            <Icon name='ios-call' />
                        </Button>
                    </FooterTab>
                </Footer>
            </Container>
        );
    }
}

export default View2;

const goToView2 = (guest) => {
      NavigationActions.view2(guest);
      console.log('Navigation router run...');
    };

<ListItem button onPress={this.goToView2(guest)}>