Объект, определенный в методе рендеринга, не определен в реакции - PullRequest
Новая
       0

Объект, определенный в методе рендеринга, не определен в реакции

0 голосов
/ 15 апреля 2020

Сегодня я столкнулся с очень странной вещью

В моем методе рендеринга для моего реагирующего натива есть 3 переменные (я использую PureComponent класс) 

    render() {
    const { clampedScroll } = this.state;

    const navbarTranslate = clampedScroll.interpolate({
        inputRange: [0, HEADER_MIN_HEIGHT],
        outputRange: [0, -HEADER_MIN_HEIGHT],
        extrapolate: "clamp",
    });
    const navbarOpacity = clampedScroll.interpolate({
        inputRange: [0, HEADER_MIN_HEIGHT],
        outputRange: [1, 0],
        extrapolate: "clamp",
    });

    const randomWorkout = [
        {
            title: "Abs Workout",
            length: "25-30 Minutes",
        },
        {
            title: "Chest Workout",
            length: "50 Minutes",
        },
        {
            title: "Full Body Workout",
            length: "40 Minutes",
        },
    ];
    return (
        <View style={{ flex: 1 }}>
            <Animated.View
                style={[
                    styles.navbar,
                    { transform: [{ translateY: navbarTranslate }] },
                ]}
            >
                <Animated.View
                    style={[styles.title, { opacity: navbarOpacity }]}
                >
                    <Toolbar />
                </Animated.View>
            </Animated.View>
            <Container>
                <Content>
                    {randomWorkout.map((value, index) => (
                        <Card>                              
                            <CardItem>
                                <Left>
                                    <Thumbnail
                                        source={Config.bannerImage}
                                    />
                                    <Body>
                                        <Text>{value.title}</Text>
                                        <Text note>{value.length}</Text>
                                    </Body>
                                </Left>
                            </CardItem>
                        </Card>
                    ))}
                </Content>
            </Container>

С этим кодом Я получил неопределенный метод карты от randomWorkout.

Что я пытался сделать: перевести его в состояние, затем использовать this.state.randomWorkout.map(), тогда он работает. Я что-то здесь упускаю?

Пожалуйста, будьте добры, я только что научился реагировать уже пару месяцев. Я могу двигаться дальше, потому что это всего лишь пародия, и данные все равно будут извлекаться с помощью API в избыточном коде. Но мне нужно знать, что не так в концепции.

Спасибо! 

this.state = {
        randomWorkout: [
            {
                title: "Abs Workout",
                length: "25-30 Minutes",
            },
            {
                title: "Chest Workout",
                length: "50 Minutes",
            },
            {
                title: "Full Body Workout",
                length: "40 Minutes",
            },
        ],
    };

Ответы [ 2 ]

0 голосов
/ 15 апреля 2020

Я пытаюсь с этим кодом и отлично работает 

/* eslint-disable react-native/no-inline-styles */
import React, { PureComponent } from 'react';
import { StyleSheet, Text, View } from 'react-native';

class TableScreen extends PureComponent {

  render() {
    const randomWorkout = [
      {
          title: "Abs Workout",
          length: "25-30 Minutes",
      },
      {
          title: "Chest Workout",
          length: "50 Minutes",
      },
      {
          title: "Full Body Workout",
          length: "40 Minutes",
      },
  ];

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        {
          randomWorkout.map((value, index) => (
          <Text>{value.title}</Text>
        ))
        }
      </View>
    );
  }
}

export default TableScreen;
0 голосов
/ 15 апреля 2020

Если вы используете компонент класса с randomWorkout, вам нужно использовать this.randomWorkout

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...