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

Привет, я создал компонент списка в 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.info('noFunction')
      }

      sessionFunction =() => { 
        console.info('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, она присваивается результат этой функции action. А так как sessionFunction не имеет оператора return, то он присваивает undefined.
VLAZ 21.06.2019 13:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
60
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

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

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

Это вызовет ошибку с noFunction, я думаю - undefined is not a function.

VLAZ 21.06.2019 13:46

Спасибо, кажется, это работает. Мне нужно было добавить () к обратному вызову item.action. Сделать это похожим на item.action()

Salman 21.06.2019 13:47

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

Другие вопросы по теме