Question

我是React Native和Redux的新手，并跟随this tutorial跟随我的应用程序实现Redux。当我加载PostList组件时，我的hasError和isLoading捕获会收到以下警告，如以下屏幕截图所示。

isLoading

HasError

我为即将嵌入问题的大量源代码道歉，我试图删除不必要的代码。

PostList.js（组件）

[unnecessary import statements]

import { fetchPosts, postsFetchError, postsFetchLoading } from '../actions/PostsActions';

class PostList extends Component {

    static navigationOptions = ({navigation}) => {
        [redacted]
    }

    renderPosts = ({ _id, upvotes, downvotes, message, datetime }, i) => {
        [redacted]
    }

    componentDidMount() {
        this.props.fetchData('[redacted]');
    }

    render() {
        if (this.props.hasError) {
            return (
                <View style={styles.center}>
                    <Text>
                        Failed to load posts!
                    </Text>
                </View>
            )
        }

        if (this.props.isLoading) {
            return (
                <View style={styles.center}>
                    <ActivityIndicator animating={true} />
                </View>
            )
        }

        this.props.posts.sort(function(a,b) {
            return Date.parse(b.datetime) - Date.parse(a.datetime);
        })

        return (
            <ScrollView style={styles.container}>
                {this.props.posts.map(this.renderPosts)}   
            </ScrollView>                        
        )
    }
}

PostList.propTypes = {
    fetchData: PropTypes.func.isRequired,
    posts: PropTypes.array.isRequired,
    hasError: PropTypes.bool.isRequired,
    isLoading: PropTypes.bool.isRequired
};

const mapStateToProps = (state) => {
    return {
        posts: state.posts,
        hasError: state.postsFetchError,
        isLoading: state.postsFetchLoading
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchData: (url) => dispatch(fetchPosts(url)),
    };
};

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

PostsActions.js

import axios from 'axios';

export function postsFetchError(bool) {
    return {
        type: 'POSTS_FETCH_ERROR',
        hasError: bool
    };
}

export function postsFetchLoading(bool) {
    return {
        type: 'POSTS_FETCH_LOADING',
        isLoading: bool
    };
}

export function postsFetchSuccess(posts) {
    return {
        type: 'POSTS_FETCH_SUCCESS',
        posts
    };
}

export function fetchPosts(url) {
    return (dispatch) => {
        dispatch(postsFetchLoading(true));

        axios.get(url)
            .then((response) => {
                if (response.status !== 200) {
                    throw Error(response.statusText);
                }

                dispatch(postsFetchLoading(false));

                return response;
            })
            .then((response) => dispatch(postsFetchSuccess(response.data)))
            .catch(() => dispatch(postsFetchError(true)));
    };
}

PostsReducers.js

export function postsError(state = false, action) {
    switch (action.type) {
        case 'POSTS_FETCH_ERROR':
            return action.hasError;
        default:
            return state;
    }
}

export function postsLoading(state = false, action) {
    switch (action.type) {
        case 'POSTS_FETCH_LOADING':
            return action.isLoading;
        default:
            return state;
    }
}

export function posts(state = [], action) {
    switch (action.type) {
        case 'POSTS_FETCH_SUCCESS':
            return action.posts;
        default:
            return state;
    }
}

将索引中的reducer和配置存储的工作组合在一起工作正常，并且我没有收到实际获得帖子的操作和缩减器的警告。我的代码与教程的示例匹配，但是如果有人发布了一个没有解决警告的教程（那么这就是Javascript开发，所以我猜任何事情都会发生），我会感到震惊。我可以为任何好奇的人添加更多信息。感谢任何有帮助的人。

Answer 1

是因为：

const mapStateToProps = (state) => {
    return {
        posts: state.posts,
        hasError: state.**postsFetchError**,
        isLoading: state.**postsFetchLoading**
    };
};

不匹配：

export function **postsError**(state = false, action) {
export function **postsLoading**(state = false, action)

警告：支持类型失败：支持'hasError'在'PostList'中标记为必需，但它的值是'undefined'

1 个答案: