React Native - навигация по ID из API с Redux не работает - PullRequest
Новая
       7

React Native - навигация по ID из API с Redux не работает

0 голосов
/ 11 июня 2018

Итак, я использую Redux для своего приложения, и пока это хорошо.Но недавно я просто ударился о стену, которая на некоторое время мешает мне кодировать.Я пытаюсь сделать навигацию, используя ID каждого элемента в моей базе данных с помощью redux.скажем, у меня есть страница «категория продуктов питания», которая заполнена элементом из моей базы данных, и каждый из этих элементов имеет свой собственный идентификатор, используя эти идентификаторы, которые я пытаюсь перейти на вторую страницу, которая является «страницей блюд».Если пользователь щелкает категорию, приложение должно отображать блюда, которые содержит категория.

На данный момент мне удается отобразить категорию, но я не знаю, как применить навигацию.

Всякий раз, когда я пытаюсь добавить вид навигации, который, как я знаю, у меня возникает ошибка:

Ошибка

state_error (**ОБНОВЛЕНИЕ **)

Вы можете увидеть все детали в моем коде.

Вот мой код:

App.js (** РЕДАКТИРОВАТЬ **) 

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { StackNavigator } from 'react-navigation';

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import Reducer from './app/redux/reducers/Reducer';

import AppContainer from './app/container/AppContainer';
import DishContainer from './app/container/DishContainer';
import Dishes from './app/component/Dishes';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const store = createStoreWithMiddleware(Reducer);

export default class App extends Component{
  render() {
    return (
      <Provider store = { store }>
        <Root />
      </Provider>
    );
  }
}

const Root = StackNavigator ({
  AppContainer        : { screen: AppContainer },
  DishContainer       : { screen: DishContainer },
  Dishes              : { screen: Dishes },
})

Action.js 

import {
    FETCHING_CATEGORY_REQUEST,
    FETCHING_CATEGORY_SUCCESS,
    FETCHING_CATEGORY_FAILURE,

    FETCHING_DISHES_REQUEST,
    FETCHING_DISHES_SUCCESS,
    FETCHING_DISHES_FAILURE,
} from "./types";
import axios from 'axios';
/* ---------------------- CATEGORY ---------------------------- */
export const fetchingCategoryRequest = () => ({
    type: FETCHING_CATEGORY_REQUEST
});
export const fetchingCategorySuccess = (json) => ({
    type: FETCHING_CATEGORY_SUCCESS,
    payload: json,
});
export const fetchingCategoryFailure = (error) => ({
    type: FETCHING_CATEGORY_FAILURE,
    payload: error
});
export const fetchCategory = () => {
    return (dispatch) => {
        axios.get('http://192.168.254.100:3308/categories/')
        .then(response => {
            dispatch({ type: FETCHING_CATEGORY_SUCCESS, payload: response.data })
        })
        .catch(error => console.log(error.response.data));
    }
}
/* ---------------------- DISHES ---------------------------- */
export const fetchingDishesRequest = () => ({
    type: FETCHING_DISHES_REQUEST
});
export const fetchingDishesSuccess = (json) => ({
    type: FETCHING_DISHES_SUCCESS,
    dish: json,
});
export const fetchingDishesFailure = (error) => ({
    type: FETCHING_DISHES_FAILURE,
    dish: error,
});
export const fetchDish = () => {
    return (dispatch) => {
        const { params } = this.props.navigation.state;
        axios.get('http://192.168.254.100:3308/categories/' + params.id)
        .then(response => {
            dispatch({ type: FETCHING_DISHES_SUCCESS, dish: response.data })
        })
        .catch(error => console.log(error.response.data));
    }
}

Reducer.js 

const initialState = {
    isFetching: false,
    errorMessage: '',
    category: [],
    dishes: [],
};
const categoryReducer = (state = initialState, action) => {
    switch(action.type) {
        case FETCHING_CATEGORY_REQUEST:
        return {
            ...state,
            isFetching: true
        };
        case FETCHING_CATEGORY_FAILURE:
        return {
            ...state,
            isFetching: false,
            errorMessage: action.payload
        };
        case FETCHING_CATEGORY_SUCCESS:
        return {
            ...state,
            isFetching: false,
            category: action.payload
        };
/* --------------------- DISHES ------------------------- */
        case FETCHING_DISHES_REQUEST:
        return {
            ...state,
            isFetching: true
        };
        case FETCHING_DISHES_SUCCESS:
        return {
            ...state,
            isFetching: false,
            dishes: action.dish
        };
        case FETCHING_DISHES_FAILURE:
        return {
            ...state,
            isFetching: false,
            errorMessage: action.dish
        }
        default:
        return state;
    }
}
export default categoryReducer;

CategoryList.js 

export default class CategoryList extends Component {
    _renderItem = ({ item }) => {
      const { cat_name } = item;
        return (
            <View style={styles.cardContainerStyle}>
                <View style={{ paddingRight: 5 }}>
                    <TouchableOpacity style = { styles.buttonContainer }>
                        <Text style={styles.cardTextStyle}
                        onPress = { () => this.props.navigation.navigate('Dishes', { id: item.cat_id })}>
                            {cat_name}
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    };
    render() {
        return (
            <FlatList
              style={{ flex: 1 }}
              data = {this.props.category}
              keyExtractor={(item, index) => index.toString()}
              renderItem={this._renderItem}
            />
        )
    }
}

AppContainer.js 

import CategoryList from "../component/CategoryList";
import { fetchCategory } from '../redux/actions/Actions';
import { connect } from 'react-redux';

class AppContainer extends Component {
    componentDidMount() {
        this.props.fetchCategory();
    }
    render() {
        let content = <CategoryList category = { this.props.randomCategory.category }/>;
        if (this.props.randomCategory.isFetching) {
            content = <ActivityIndicator size="large"/>;
        }
        return <View style={styles.container}>{content}</View>;
    }
}
const mapStateToProps = state => {
    return {
        randomCategory: state
    };
}
export default connect(mapStateToProps, { fetchCategory })(AppContainer);

Dishes.js (Здесь я хочу перейти из категории) 

export default class Dishes extends Component {
    _renderItem = ({ item }) => {
      const { cat_desc } = item;
        return (
            <View style={styles.cardContainerStyle}>
                <View style={{ paddingRight: 5 }}>
                    <TouchableOpacity>
                        <Text style={styles.cardTextStyle}>
                            {cat_desc}
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    };
    render() {
        const { params } = this.props.navigation.state;
        return (
            <FlatList
              style={{ flex: 1 }}
              data = {this.props.dishes}
              keyExtractor={(item, index) => index.toString()}
              renderItem={this._renderItem}
            />
        )
    }
}

DishContainer.js 

import Dishes from "../component/Dishes";
import { fetchDish } from '../redux/actions/Actions';
import { connect } from 'react-redux';

class DishContainer extends Component {
    componentDidMount() {
        this.props.fetchDish();
    }
    render() {
        let content = <Dishes dishes = { this.props.randomDishes.dishes }/>;
        if (this.props.randomDishes.isFetching) {
            content = <ActivityIndicator size="large"/>;
        }
        return <View style={styles.container}>{content}</View>;
    }
}
const mapStateToProps = state => {
    return {
        randomDishes: state
    };
}

РЕДАКТИРОВАТЬ: Некоторые параметры не работают или параметрыprops.navigation.navigate не вызывает идентификатор элемента из моего API.Я не уверен, пожалуйста, помогите мне.

1 Ответ

0 голосов
/ 11 июня 2018

Отредактируйте ваш AppContainer.js, как показано ниже: 

import CategoryList from "../component/CategoryList";
import { fetchCategory } from '../redux/actions/Actions';
import { connect } from 'react-redux';

class AppContainer extends Component {
componentDidMount() {
    this.props.fetchCategory();
}
render() {
    let content = <CategoryList 
           navigation = {this.props.navigation}
           category = {this.props.randomCategory.category}/>;
    if (this.props.randomCategory.isFetching) {
        content = <ActivityIndicator size="large"/>;
    }
    return <View style={styles.container}>{content}</View>;
}
}
const mapStateToProps = state => {
return {
    randomCategory: state
};
}
export default connect(mapStateToProps, { fetchCategory })(AppContainer);

Проблема в том, что CategoryList не может получить navigation реквизитов родительского компонента (AppCountainer), поэтому вам нужно передать navigation как реквизит.

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

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

...