Реагировать useEffect крючок бесконечный цикл - PullRequest
Новая
       15

Реагировать useEffect крючок бесконечный цикл

0 голосов
/ 25 октября 2019

Я продолжаю сталкиваться с бесконечным циклом при попытке использовать хук useEffect для извлечения и установки данных. Я попробовал 3 варианта хука, и все они создают цикл, как мне остановить это? 

useEffect(() => {
        (async () => {
            PostApi.getPostsByUser(auth.user._id, auth.token).then(response => setPosts(response))
        })()
    })

useEffect(() => {
        (async () => {
            PostApi.getPostsByUser(auth.user._id, auth.token).then(response => setPosts(response))
        })()
    },[])

useEffect(() => {
        (async () => {
            PostApi.getPostsByUser(auth.user._id, auth.token).then(response => setPosts(response))
        })()
    },[profile.posts])

РЕДАКТИРОВАТЬ: Вот код PostApi.getPostsByUser 

getPostsByUser: (userId, token) => {
        return(
            axios
            .get("/api/posts/by/" + userId, {
                headers: {
                    Accept: "application/json",
                    "Content-Type": "application/json",
                    Authorization: "Bearer " + token
                }
            })
            .then(response => {
                console.log("Posts by User");
                console.log(response.data);
                return response.data;
            })
            .catch(err => console.log(err))
        )
    }

РЕДАКТИРОВАТЬ: код компонента функции: 

const Posts = () => {
    const [{auth}] = useAuth();
    const [{profile},, setPosts] = useProfile()

    useEffect(() => {
        PostApi.getPostsByUser(auth.user._id, auth.token)
        .then(response => setPosts(response));
    },[]);

    console.log(profile)
    return(
        <div className="User-Post">
            <div className="New-Post">
                <NewPost />
            </div>
            <div className="User-Posts-Content">
                {
                    profile.posts ? profile.posts.map((item, key) => {
                        return <Post post={item} key={key} />
                    }) : null
                }
            </div>
        </div>
    )
}

export default Posts

Ответы [ 3 ]

0 голосов
/ 25 октября 2019

Вы можете попробовать вот так. 

useEffect(() => {
  const get = async () => {
    const response = await PostApi.getPostsByUser(auth.user._id, auth.token);
    setPosts(response);
  }
  get();
},[]);
0 голосов
/ 30 октября 2019

Это работает для меня ... и самое простое решение тоже 

  const [toggle, setToggle] = useState(false);
  useEffect(() => {
          (async () => {
              PostApi.getPostsByUser(auth.user._id, auth.token).then(response => setPosts(response))
          })()
      },toggle)
0 голосов
/ 25 октября 2019

Изменение: 

const [auth] = useAuth();
const [profile, setPosts] = useState();


const setPosts = posts => { setPosts(state => ({ ...state, profile: { 
             ...state.profile, posts: posts } })) } 


getPostsByUser: (userId, token) => {
        return(
            axios
            .get("/api/posts/by/" + userId, {
                headers: {
                    Accept: "application/json",
                    "Content-Type": "application/json",
                    Authorization: "Bearer " + token
                }
            });
    }

и 

useEffect(() => {
            PostApi.getPostsByUser(auth.user._id, auth.token)
            .then(response => setPosts(response.data));     
     },[]);
...