Блог

Главная - Вопросы по программированию - Я не могу отображать элементы на экране

Я не могу отображать элементы на экране

#react-native #redux #react-redux

Вопрос:

Я решил, что мне нужно использовать redux в своем приложении, и начал изменять свое приложение, чтобы использовать redux. У меня возникли трудности с отображением списка данных на моем экране, в консоли нет ошибок. У меня есть настроенный магазин и редуктор, и я использую модели, все, кажется, работает нормально. мой экран отображается, но данные в моем магазине не отображаются. Кто-нибудь может понять, где я иду не так?

 import * as React from "react";
import {
  View,
  StyleSheet,
  FlatList,
  SafeAreaView,
  Dimensions,
  TouchableOpacity,
  Image,
  Text,
} from "react-native";
import { useSelector } from "react-redux";

import BigButton from "../components/BigButton.js";
import HomeScreenImage from "../components/HomeScreenImage.js";
//import HomeData from "../data/HomeData";
import colors from "../constants/colors.js";

const HomeScreen = (props, navigation) => {
  const exercise = useSelector((state) => state.exercise.homeData);
  return (
    <View style={styles.containerTop}>
      <View>
        <HomeScreenImage style={styles.top} />
        <View style={styles.top}>
          <BigButton title="Beast" />
        </View>
      </View>
      <SafeAreaView style={styles.flatListContainer}>
        <FlatList
          data={exercise}
          keyExtractor={(item) => item.id}
          renderItem={(itemData) => (
            <TouchableOpacity
              activeOpacity={0.8}
              style={styles.container}
              onPress={() => {
                {
                  if (itemData.item.id == 1) {
                    props.navigation.push("Body");
                  } else if (itemData.item.id == 2) {
                    props.navigation.push("PreMade");
                  } else if (itemData.item.id == 3) {
                    props.navigation.push("Stats");
                  } else if (itemData.item.id == 4) {
                    props.navigation.push("History");
                  } else if (itemData.item.id == 5) {
                    props.navigation.push("CreateTrack");
                  } else props.navigation.push("TrackList");
                }
              }}
            >
              <View style={styles.cardContainer}>
                <Image style={styles.imageStyle} source={itemData.Item.image} />
                <View style={styles.infoStyle}>
                  <Text style={styles.titleStyle}>{itemData.item.name}</Text>
                  <Text style={styles.bodyTextStyle}>{itemData.item.body}</Text>
                </View>
              </View>
            </TouchableOpacity>
          )}
        />
      </SafeAreaView>
    </View>
  );
};

редуктор ниже

 import HOMEDATA from "../../data/HomeData";
import CATEGORIES from "../../data/CategoryData";
import EXERCISE from "../../data/ExerciseData";
import MEMBERSHIPDATA from "../../data/MembershipData";

const initialState = {
  homeData: HOMEDATA,
  categories: CATEGORIES,
  exercises: EXERCISE,
  membershipData: MEMBERSHIPDATA,
};

export default (state = initialState, action) => {
  return state;
};

Комментарии:

1. Предполагая, что элемент useSelector возвращает массив, я не вижу ничего плохого. Попробуйте изменить значение keyExtractor на keyExtractor={(item) => item.id.toString()} (но я сомневаюсь, что это исправит проблему). Вы пробовали использовать значение констант exercise вместо «извлечения» из магазина?

2. Спасибо Вам за ответ. Iv запустите console.log(store.getState()) в App.js. В консоли я возвращаю это: объект не определен. Я отредактирую свой вопрос, включив в него редуктор, чтобы посмотреть, добавит ли он немного больше ясности для людей.

Ответ №1:

Я нашел решение. Способ экспорта данных не работал с react-redux. Раньше это было нормально, но при использовании экспорта с помощью redux он не импортировал его и позволял мне отображать его на экране.

вот как у меня это было раньше:

 import Category from "../models/Category";

export const CATEGORIES = [
  new Category(
    "c1",
    "Chest",
    require("../assets/images/FlatBenchPress.jpg"),
    "Time To Unleash The Beast"
  ),
  new Category(
    "c3",
    "Shoulders",
    require("../assets/images/ShouldersPic.jpg"),
    "5% Human, 95% Beast, 100% Prepared To Destroy My Challenges"
  ),
  new Category(
    "c2",
    "Back",
    require("../assets/images/ChickB.jpg"),
    "The Pain You Feel Today, Will Be The Strenght You Need Tomorrow"
  ),

  new Category(
    "c4",
    "Biceps",
    require("../assets/images/Bicep.jpg"),
    "You Gotta Be A Beast There Is No Other Option"
  ),
  new Category(
    "c5",
    "Triceps",
    require("../assets/images/TriPic.jpg"),
    "Train Strong, Positive And Full Of Beast Mode"
  ),
  new Category(
    "c8",
    "Forearms",
    require("../assets/images/MenuTop.jpg"),
    "A Beast Never Fails"
  ),
  new Category(
    "c6",
    "Abs",
    require("../assets/images/AbsPic.jpg"),
    "There Is Time To Rest But It Is Not That Time Now, Now Is Time For Beast Mode"
  ),
  new Category(
    "c7",
    "Legs",
    require("../assets/images/LegsPic.jpg"),
    "A Real Beast Is Put To The Test On Legs Day, The Beast Never Fails"
  ),

  new Category(
    "c9",
    "Cardio",
    require("../assets/images/CardioPic.jpg"),
    "Sweat Out The Weakness It Is A Poison That Must Be Purged"
  ),
];

И это решение:

 import Category from "../models/Category";

const CATEGORIES = [
  new Category(
    "c1",
    "Chest",
    require("../assets/images/FlatBenchPress.jpg"),
    "Time To Unleash The Beast"
  ),
  new Category(
    "c3",
    "Shoulders",
    require("../assets/images/ShouldersPic.jpg"),
    "5% Human, 95% Beast, 100% Prepared To Destroy My Challenges"
  ),
  new Category(
    "c2",
    "Back",
    require("../assets/images/ChickB.jpg"),
    "The Pain You Feel Today, Will Be The Strenght You Need Tomorrow"
  ),

  new Category(
    "c4",
    "Biceps",
    require("../assets/images/Bicep.jpg"),
    "You Gotta Be A Beast There Is No Other Option"
  ),
  new Category(
    "c5",
    "Triceps",
    require("../assets/images/TriPic.jpg"),
    "Train Strong, Positive And Full Of Beast Mode"
  ),
  new Category(
    "c8",
    "Forearms",
    require("../assets/images/MenuTop.jpg"),
    "A Beast Never Fails"
  ),
  new Category(
    "c6",
    "Abs",
    require("../assets/images/AbsPic.jpg"),
    "There Is Time To Rest But It Is Not That Time Now, Now Is Time For Beast Mode"
  ),
  new Category(
    "c7",
    "Legs",
    require("../assets/images/LegsPic.jpg"),
    "A Real Beast Is Put To The Test On Legs Day, The Beast Never Fails"
  ),

  new Category(
    "c9",
    "Cardio",
    require("../assets/images/CardioPic.jpg"),
    "Sweat Out The Weakness It Is A Poison That Must Be Purged"
  ),
];

export default CATEGORIES;

Я понятия не имею, почему это сработало, но это так. Если кто-нибудь знает, почему это работает, пожалуйста, опубликуйте это здесь для всех, спасибо.

Метки: