Question

我正在尝试构建一个本机应用程序，因为该用户可以在 EditRoutine.js 文件中添加例行或日常任务，并且可以在 RoutineOverviewScreen.js 中看到>并且我正在使用redux来存储这些数据，并使用钩子来存储和获取数据。

下面是 EditRoutine.js 代码段

import React, { useState, useEffect, useCallback } from "react";
import { View, StyleSheet, Text, TextInput, ScrollView } from "react-native";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import Card from "../components/Card";
import { useSelector, useDispatch } from "react-redux";
import * as routinesActions from "../store/actions/routine";
import Routine from "../models/routine";
import HeaderButton from "../components/HeaderButton";

const EditRoutine = (props) => {
  const dispatch = useDispatch();
  const [title, setTitle] = useState("");
  const [detail, setDetail] = useState("");
  const [time, setTime] = useState("");

  const submitHandler = useCallback(() => {

    dispatch(routinesActions.createRoutine(title, detail, time));

    props.navigation.goBack();
  }, [dispatch,title, detail, time]);

  useEffect(() => {
    props.navigation.setParams({ submit: submitHandler });
  }, [submitHandler]);

  return (
    <Card style={styles.container}>
      <Text>Title</Text>
      <TextInput
        style={styles.input}
        value={title}
        onChangeText={(text) => setTitle(text)}
      />
      <Text>Details</Text>
      <TextInput
        style={styles.input}
        multiline
        numberOfLines={4}
        value={detail}
        onChangeText={(text) => setDetail(text)}
      />
      <Text>Time</Text>
      <TextInput
        style={styles.input}
        value={time}
        onChangeText={(text) => setTime(text)}
      />
    </Card>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    padding: 10,
    width: "100%",
  },
  input: {
    paddingHorizontal: 2,
    borderBottomColor: "#ccc",
    borderBottomWidth: 1,
    width: "100%",
    marginVertical: 15,
  },
});

EditRoutine.navigationOptions = (navData) => {
  const submitFn = navData.navigation.getParam("submit");
  return {
    headerTitle: "Edit Routine",
    headerTitle: "Your Routines",
    headerLeft: (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title="Menu"
          iconName={
            Platform.OS === "android" ? "md-arrow-back" : "ios-arrow-back"
          }
          onPress={() => {
            navData.navigation.goBack();
          }}
        />
      </HeaderButtons>
    ),
    headerRight: (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title="Save"
          iconName={
            Platform.OS === "android" ? "md-checkmark" : "ios-checkmark"
          }
          onPress={submitFn}
        />
      </HeaderButtons>
    ),
  };
};

export default EditRoutine;

这是我的 RoutineOverviewScreen.js 文件，我正在其中显示创建的例程

import React from "react";
import { View, StyleSheet, Text, FlatList } from "react-native";
import Card from "../components/Card";
import { HeaderButtons, Item } from "react-navigation-header-buttons";

import HeaderButton from "../components/HeaderButton";
import { useSelector } from "react-redux";

const RoutineOverViewScreen = (props) => {
  const routines = useSelector((state) => state.routines.myRoutine);
  return (
    <FlatList
      data={routines}
      keyExtractor={(item) => item.id}
      renderItem={(itemData) => (
        <Card>
          <View>
            <Text>{itemData.item.id} </Text>
          </View>
          <View>
            <Text>{itemData.item.title} </Text>
          </View>
          <View>
            <Text>{itemData.item.detail} </Text>
            <View>
              <Text>{itemData.item.time} </Text>
            </View>
          </View>
        </Card>
      )}
    />
  );
};

const styles = StyleSheet.create({});

RoutineOverViewScreen.navigationOptions = (navData) => {
  return {
    headerTitle: "Your Routines",
    headerLeft: (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title="Menu"
          iconName={Platform.OS === "android" ? "md-menu" : "ios-menu"}
          onPress={() => {
            navData.navigation.toggleDrawer();
          }}
        />
      </HeaderButtons>
    ),
    headerRight: (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title="Add"
          iconName={
            Platform.OS === "android" ? "md-add-circle" : "ios-add-circle"
          }
          onPress={() => {
            navData.navigation.navigate("Edit");
          }}
        />
      </HeaderButtons>
    ),
  };
};

export default RoutineOverViewScreen;

下面是我的操作文件 routine.js 代码段

export const CREATE_ROUTINE= 'CREATE_ROUTINE';
  
export const deleteRoutine = routineId => {
  return { type: DELETE_ROUTINE, pid: routineId };
};

export const createRoutine = (title, detail, time) => {
  return {
    type: CREATE_ROUTINE,
    routineData: {
      title,
      detail,
      time
    }
  };
};

下面是我的减速器文件 reducer.js 片段

import {
  DELETE_ROUTINE,
  CREATE_ROUTINE,
  UPDATE_ROUTINE,
} from "../actions/routine";
import Routine from "../../models/routine";

const initialState = {
  myRoutine: {},
  id: 1,
};

export default (state = initialState, action) => {
  switch (action.type) {
    case CREATE_ROUTINE:
      const newRoutine = new Routine(
        state.id,
        action.routineData.title,
        action.routineData.detail,
        action.routineData.time
      );
      return {
        ...state,
        items: { ...state.items, [state.id]: newRoutine },
        id: state.id + 1,
      };
    default: {
      return state;
    }
  }
  return state;
};

这是我的 app.js 文件片段

import React, { useState } from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { AppLoading } from 'expo';
import * as Font from 'expo-font';

import routinesReducer from './store/reducers/routine';
import AppNavigator from './navigator/RoutineNavigator';

const rootReducer = combineReducers({
  routines: routinesReducer,
});

 const store = createStore(rootReducer);

const fetchFonts = () => {
  return Font.loadAsync({
    'open-sans': require('./assets/fonts/OpenSans-Regular.ttf'),
    'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf')
  });
};

export default function App() {
  const [fontLoaded, setFontLoaded] = useState(false);

  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => {
          setFontLoaded(true);
        }}
      />
    );
  }
  return (
    <Provider store={store}>
      <AppNavigator />
    </Provider>
    
  );
}

使用上面的这些代码，我可以创建一个新例程，但是我不知道我的输入是否存储在App中央状态，因为当我尝试呈现那些保存的数据时，我无法在< strong> RoutineOverviewScreen 屏幕。请帮助我和

关于我：Govind Kumar Thakur（iamgovindthakur）电子邮件：iamgovindthakur@gmail.com 谢谢：）

Answer 1

您正在尝试使用“ myRoutine”的数据，但永远不要将数据保存到化简器中的该属性。

我认为您遇到的问题归因于减速器中的以下行：

items: { ...state.items, [state.id]: newRoutine },

无法在Redux存储中存储数据

1 个答案: