Question

建立另一个反应原生应用程序，但我遇到一个超级令人沮丧的问题，每当我经历过这个，因为我错过了出口，但我相当确定＃＆＃？ 39;这次不是这样。

使用RN Router Flux导航到路线时 - 收到错误：Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

如果我将该视图设置为初始视图，那么一切都很好。

我的路线如下：

import React from "react";
import {Scene, Stack} from "react-native-router-flux";

import Navbar from '../components/Navbar';
import AboutComponent from "../components/About";

import DevelopmentsComponent from "../components/Developments.js";
import DevelopmentsContainer from '../../containers/Developments.js'

import DevelopmentComponent from "../components/Development.js";
import DevelopmentContainer from "../../containers/Development.js";

const Index = (
    <Stack key="root" navBar={Navbar}>
        <Scene key="siteplan" component={AboutComponent} title="Login"/>
        <Scene initial key="developments" component={DevelopmentsContainer} Layout={DevelopmentsComponent} />

        <Scene
            clone
            key="development"
            component={DevelopmentContainer}
            Layout={DevelopmentComponent}
        />
    </Stack>
);

export default Index;

＆＃39;组件＆＃39;问题：

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

import {getDevelopments, handleDevelopmentSelected} from "../actions/developments";

let fetchDevelopments = () => {
    return this.props.getDevelopments()
};

class DevelopmentList extends Component {

    static propTypes = {
        Layout: PropTypes.func.isRequired,
        developments: PropTypes.array.isRequired,
        getDevelopments: PropTypes.func.isRequired,
        handleDevelopmentSelected: PropTypes.func.isRequired
    }

    render = () => {
        const {Layout, developments, handleDevelopmentSelected, developmentsForComparison} = this.props;

        return (<Layout
            developments={developments}
            selectedForComparison={developmentsForComparison}
            reFetch={() => fetchDevelopments()}
            selectForComparison={(development) => handleDevelopmentSelected(development)}
        />)
    }
}

const mapStateToProps = state => {
    return ({
        developments: state.developments.developments || {},
        developmentsForComparison: state.developments.developmentsForComparison || []
    })
}

const mapDispatchToProps = {
    getDevelopments,
    handleDevelopmentSelected
};


export default connect(mapStateToProps, mapDispatchToProps)(DevelopmentList);

为了论证，渲染布局组件：

import React from "react";
import {Container, Content} from "native-base";
import PropTypes from "prop-types";
import {Text} from "react-native";
import Header from "./Header";

class DevelopmentComponent extends React.Component {

    static propTypes = {
        developments: PropTypes.array,
        selectForComparison: PropTypes.func.isRequired,
        selectedForComparison: PropTypes.array
    }

    constructor(props) {
        super(props);
    }

    developments = this.props.developments;

    render() {
        if (!this.developments.length) return <Text>No Developments</Text>;
        return (
            <Container>
                <Content padder>
                    <Header
                        title="AVAILABILITY"
                    />
                    <Text>Hello</Text>
                </Content>
            </Container>
        );
    }
}
;

export default DevelopmentComponent

我错过了一些非常明显的东西吗？任何帮助表示赞赏！

由于

React Native Router Flux，导航导致Invariant Violation

0 个答案: