不变违规:App(...):渲染中没有返回任何内容.这通常意味着缺少return语句.或者,为了不渲染,返回null

Question

这是我在React Native中使用Redux的第一个项目,我有一个组件(MyApp),我在index.js中导入它.但它给出了上述错误.

index.js -

import React from 'react';
import { AppRegistry } from 'react-native';
import MyApp from './component/MyApp';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import  rootReducer from './reducers';
import thunk from 'redux-thunk';

const store = createStore(rootReducer, applyMiddleware(thunk));
const App = () => {
    <Provider store={store}>
        <MyApp/>
    </Provider>
}

AppRegistry.registerComponent('learningRedux', () => App);

MyApp.js

import React, { Component } from 'react';
import {
    Text, View, TouchableHighlight
} from 'react-native';

import { connect } from 'react-redux';
import { fetchPeopleFromAPI } from '../actions/index';

export class MyApp extends Component {

    render() {
        const { people, isFetching } = props.people
        return (
            <View style={{
                margin: 100,
                paddingLeft: 20,
                paddingRight: 20
            }}
            >
                <Text style={{
                    fontSize: 30,
                    textAlign: 'center'
                }}> Redux App </Text>

                <TouchableHighlight style={{
                    backgroundColor: 'blue',
                    height: 60,
                    justifyContent: 'center',
                    alignItems: 'center'
                }}
                    onPress={() => {
                        props.getPeople
                    }}>
                    <Text style={{
                        color: 'white'
                    }}> Fetch Data </Text>
                </TouchableHighlight>
                {
                    isFetching && <Text> Loading... </Text>
                }
                {
                    people.length ? (
                        people.map((person, index) => {
                            return (
                                <View key={index}>
                                    <Text> Name : {person.name} </Text>
                                    <Text> Birth Year : {person.birth_year} </Text>
                                </View>
                            )
                        }
                        )
                    ) : null
                }
            </View>
        );
    }
}

mapStateToProps = (state) => {
    return {
        people: state.peopleReducer
    }
}

mapDispatchToProps = (dispatch) => {
    return {
        getPeople: () => dispatch(fetchPeopleFromAPI())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyApp)

我尝试了另一种方法,通过创建一个const MyApp而不是类,并通过传递道具作为参数使用箭头函数,然后只使用return(不渲染),但它仍然无法正常工作.谢谢.

Answer 1

const App = () => {
    <Provider store={store}>
        <MyApp/>
    </Provider>
}

箭头功能返回上方null.如果您使用大括号,则应添加return关键字.请先尝试添加return关键字.

const App = () => {
    return (
        <Provider store={store}>
             <MyApp/>
        </Provider>
    )
}

比较下面的代码.

const add = (a, b) => a + b;
const anotherAdd = (a, b) => { return a + b; };

那个代码相等.区别在于第一个不需要return关键字,因为它不使用大括号.