web-dev-qa-db-ja.com

React Native <ListItem onPress = {...}>-なぜこの関数が実行されているのですか？

React Nativeで、stateの管理にReduxを使用しています。UIコンポーネントの NativeBaseライブラリ と react -native-router-flux は、ビュー間のナビゲーションを処理しています。

現在、guestオブジェクトの配列から作成される基本的なリストを作成しています。リストはReduxストアに保存されており、それにアクセスして表示することができます。リスト内の各項目は、guest配列内のguestsに関連付けられています。リスト内の各アイテムをタッチ可能にし、関連するguestオブジェクトをプロパティとして次のビューに渡して詳細を表示したいと思います。

そのために、onPressコンポーネントに関連付けられた標準関数であるListItem関数を使用しています（NativeBase docs here を参照）。また、react-native-router-fluxの ドキュメント に従い、コンポーネント自体の外部でナビゲーションアクションを定義して、ListItemがレンダリングされるたびではなく、押されたときに呼び出すようにしました。

私の問題は、ListItemが押されたときではなく、ListItemがレンダリングされるたびにonPress={goToView2(guest)}関数が呼び出されることを発見していることです。

それは私が省略した単純なものでなければならないと確信しています。助言がありますか？

View1.js-guestsの初期リストを表示するビュー：

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

View2.js-View1.jsから選択したguestの詳細を表示するビュー：

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;
javascriptreact-nativereact-native-router-fluxnative-base
12
oldo.nicho

<ListItem button onPress={() => {goToView2(guest)}}を試してください

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

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

関数で矢印関数を使用している場合は、this.goToView2（guest）... renderメソッド内に矢印関数を書き込むと、パフォーマンスの問題が発生します...

2
rajeshzmoke