useEffect无限循环网络请求

问题描述

我的网络上收到无数个请求，这是由于我的useEffect所致。我知道问题是因为我在useEffect函数中将“ posts”和“ setPost”作为第二个参数放在括号中，但是每当我添加新帖子时我都需要呈现页面，因此“ posts”必须在括号内。

    function Home() {
const {userData,setUserData} = useContext(userContext)
const [posts,setPost] = useState([])
const [createPost,setCreatePost] = useState('')
const handletoken = () => {
    localStorage.removeItem('auth-token')
}

const token = localStorage.getItem("auth-token");

const handleOnSubmit = (e) => {
    e.preventDefault()
    axios.post('http://localhost:5000/posts',{textOfThePost: createPost},{
        headers: { 'auth-token': token },})
    .then((res) => {setCreatePost("")})
    axios.get('http://localhost:5000/posts')
    .then(res => {
        setPost(res.data)
    })
}

useEffect(() => {
},[posts])

解决方法

如果您在useEffect中进行setPost的操作，我假设posts被更改了，并且您在posts中添加了useEffect作为依赖项，那么当然调用，它进入无限循环。确定何时要调用posts API。

const [posts,setPost] = useState([])

useEffect(() => {
   axios.get('http://localhost:5000/posts')
   .then(res => {
     setPost(res.data) // Which will change `posts`
   })
},[posts]) // this will trigger useEffect and It goes infinite loop

// Change it to
useEffect(() => {
   axios.get('http://localhost:5000/posts')
   .then(res => {
     setPost(res.data) // Which will change `posts`
   })
},[]) -> Which call only one time

,

每次posts更改时都会调用此useEffects，并且在useEffect内更改了帖子的值，因此您进入了递归循环。

  useEffect(() => {
    axios.get('http://localhost:5000/posts')
        .then(res => {
            setPost(res.data)
        })
    },[posts])

如果只希望它被调用一次，则应保留效果为空的数组，这样，在装入组件时，它将仅被调用一次。

  useEffect(() => {
    axios.get('http://localhost:5000/posts')
        .then(res => {
            setPost(res.data)
        })
    },[])