Почему мой элемент списка вызывает функции, это не должно? - PullRequest
Новая
       34

Почему мой элемент списка вызывает функции, это не должно?

2 голосов
/ 21 июня 2019

Привет! Я создал компонент списка в React Native для своей страницы настроек.Я хочу, чтобы у каждого компонента на странице настроек была функция (в некоторых случаях нет).

Я создал array с objects, где я размещаю атрибут каждого элемента.

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

    }

Ответы [ 2 ]

1 голос
/ 21 июня 2019

Вам нужно удалить выражение вызова ().

1 голос
/ 21 июня 2019

Просто удалите () из функций.

Если у вас есть что-то вроде action: this.noFunction(), вы выполняете функцию и присваиваете ей action, поэтому foo.action будет значением, возвращаемым из noFunction call (который в вашем случае не определен, потому что noFunction ничего не возвращает).

Если вы передаете его как action: this.noFunction, вы передаете только ссылку на функцию, а позже вы можете сделать foo.action() и позвоните noFunction.

...