Question

我正在学习redux。我一直遇到上面的警告。这是代码：

import React,{useEffect} from 'react';
import {connect} from 'react-redux';
import {fetchPosts} from '../actions/postActions'

function Post(props){

   useEffect(
   () => {
      props.fetchPosts();
   },[]);

    const postItems = props.posts.map(post => (
        <div key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.body}</p>
        </div>
    ));
    return (
        <div>
            <h1>Post</h1>
            {postItems}
        </div>
    );
}

const mapStateToProps = state => ({
    posts: state.posts.items
});

export default connect(mapStateToProps, { fetchPosts })(Post);

fetchPost声明（如果需要）

export const fetchPosts = () => dispatch => {
        fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
        .then(res => res.json())
        .then(posts => dispatch({
            type: FETCH_POSTS,
            payload: posts
        }));

现在我认为问题是因为fetchPost被声明为另一个文件夹中的操作，这会导致错误。读SO，最好的解决方案是将fetchPosts声明移到useEffect内。我应该在redux中执行此操作吗，因为太多的教程将操作分开放置，而不是与组件放置在同一文件夹中。同样，它总是说我具体缺少道具，但是当我将道具放入依赖项数组时，它会创建一个无限循环。你们可以帮我吗，谢谢。我可以保证我已经阅读了所有问题，但是在那种情况下，它们缺少了功能，而不是道具本身，因此我想问一下。谢谢您的阅读。

Answer 1

您需要指定在useEffect的回调中访问的所有依赖项。在这种情况下，您只需要添加fetchPosts：

function Post({fetchPosts}){

   useEffect(() => {
     fetchPosts();
   },[fetchPosts]);

请注意，如果该功能在组件的props上可用，则无需从动作中导入fetchPosts。

official React docs中的更多信息。

useEffect缺少依赖项“道具”

1 个答案: