Question

我正在app.js中获取所有事件数据：

store.dispatch(
  eventsFetchData(
    "http://wordpress.rguc.co.uk/index.php/wp-json/tribe/events/v1/events"
  )
);

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

但是我需要在我的第一页上有一个下拉列表，用户可以在其中选择一个类别。我只需要显示所选类别的事件。

我会在哪里获取我的类别以填充我的选择列表？然后，我可以仅对该类别中的事件进行提取。

这是我使用硬编码数据的选择列表，我想从api获取：

import React, { Component } from "react";
import { connect } from "react-redux";

import { View, Text, Image, StyleSheet } from "react-native";

import { setSelectedView } from "../actions/events";
import { navigate } from "../navigation/actions";
import Picker from "./common/Picker";

import * as theme from "../theme";

class HomeScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {};

        this.onGroupChange = this.onGroupChange.bind(this);
        this.onYearChange = this.onYearChange.bind(this);
    }

    onYearChange(e) {
        if (e !== null) {
            this.props.dispatch(setSelectedView(e));
        }
    }

    onGroupChange(e) {
        this.props.navigation.navigate("Month");
    }

    render() {
        const studentYears = [
            {
                id: 0,
                label: "Year 1",
                value: 1,
                options: ["Firm 1", "Firm 2", "Firm 3"]
            },
            {
                id: 1,
                label: "Year 2",
                value: 2,
                options: ["Firm 2", "Firm 3", "Firm 4"]
            },
            {
                id: 2,
                label: "Year 3",
                value: 3,
                options: ["Firm 5", "Firm 6", "Firm 7"]
            }
        ];

        let selectedView = this.props.selectedView;

        return (
            <View style={styles.container}>
                <Image
                    source={require("../img/logoGreen.png")}
                    style={{ width: 300, height: 200 }}
                />

                <View style={{ backgroundColor: "white" }}>
                    <Picker
                        selectedValue={selectedView}
                        label="Year"
                        onChange={this.onYearChange}
                        options={studentYears}
                    />
                    {selectedView
                        ? <Picker
                              selectedValue="0"
                              label="Year group"
                              onChange={this.onGroupChange}
                              options={studentYears[selectedView].options}
                          />
                        : null}
                </View>
            </View>
        );
    }
}

const mapStateToProps = state => {
    return {
        events: state.events,
        hasErrored: state.eventsHasErrored,
        isLoading: state.eventsIsLoading,
        selectedView: state.setSelectedView
    };
};


export default connect(mapStateToProps)(HomeScreen);

const styles = StyleSheet.create({
    container: {
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#6da1a6",
        flex: 1
    },
    logo: {
        flex: 1,
        width: 300,
        height: 100,
        resizeMode: "contain"
    }
});

所以国家的顺序应该是，

主屏幕从api加载类别并填充选择列表。
用户选择类别。应该在用户选择子类别的位置出现另一个选择列表。
加载主要事件数据，由所选子类别确定。
用户被带到主要活动屏幕/日历。

Answer 1

您应该在主屏幕组件的componentDidMount(){ ..here..}功能中获取数据。获得数据后，您可以：

- 将其置于Homescreen类状态内，这意味着您应该执行this.setState({...fetchedData})

请注意，您必须在开始时处理选择器中的空数据，因为您不会立即获得数据。

- 或者你可以用你提取的数据发送一个redux函数

this.props.dispatch(action(data))

在这种情况下，您需要使用mapStateToprops函数将包含数据的redux状态添加到主屏幕组件，当您获取数据时，您将在this.props.YOUR_MAPED_STATE中找到数据。

我在哪个时间点使用redux获取应用的数据？

1 个答案: