Почему срабатывает событие Click после рендера?

Question

Всем привет. Во время рендера срабатывает собитие onClick по каждому выводимому блоку. При нажатии onClick не работает.

<View style={styles.blockTraining}>
        {
          this.state.events.length > 0 ? (
            this.state.events.map((value) => {
              return <Card onClick={this.navToEvent()} key={value.event.id}>
                <Text style={styles.activeTraining}>{value.event.name}
                </Text>
                <View style={styles.textTraining}>
                  <View>
                    <Text style={styles.valuesTraining}>Старт: {value.event.startDate}</Text>
                    <Text style={styles.valuesTraining}>Тренер: {value.event.lector.person.fullname}</Text>
                    <Text style={styles.valuesTraining}>Место:</Text>
                  </View>
                  <View>
                    <Icon
                      name='check'
                      type='evilicon'
                      color='#228B22'
                      size={30}
                    />
                  </View>
                </View>
              </Card>
            })
          ) : (
            <ActivityIndicator
              size="large"
              color="#EA329A"
              style={styles.loader}
            />
          )
        }
      </View>

Answer 1

Почему срабатывает событие onClick после рендера? Или почему функция вызывается каждый раз при отрисовке компонента? Всё достаточно просто, ответ следует ниже.

Убедитесь, что вы не вызываете функцию, когда передаёте её компоненту:

// Неправильно: вместо ссылки была вызвана функция navToEvent
<Card onClick={this.navToEvent()} />

Вместо этого передайте саму функцию (без скобок):

// Правильно: функция navToEvent передаётся как ссылка
<Card onClick={this.navToEvent} />

Полезные ссылки:

БЛОГ НА HUSL

Почему срабатывает событие Click после рендера?

Ответы (1 шт):