【发布时间】：2021-08-05 06:12:23
【问题描述】：
我决定我需要在我的应用程序中使用 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;
};
【问题讨论】：
-
假设 useSelector 如果返回一个数组，我看不出有什么问题。尝试将
keyExtractor更改为keyExtractor={(item) => item.id.toString()}（但我怀疑它会解决问题）。您是否尝试过使用exercise的常量值而不是从商店“获取”？ -
感谢您的回复。 Iv 在 App.js 中运行 console.log(store.getState())。在控制台中，我得到了回复：对象未定义。我将编辑我的问题以包含减速器，看看它是否能让人们看到更清晰。
标签： react-native redux react-redux