useEffect 无限循环网络请求答案

【问题标题】：useEffect infinite loop network requestuseEffect 无限循环网络请求
【发布时间】：2021-02-15 09:47:27
【问题描述】：

我的网络收到了无限的请求，这是由于我的 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。你可以只更新状态。
@malong11 是的！就像推特一样
@RunSmeagolRun 你是什么意思？所有帖子都应该在页面加载后立即出现，这就是我使用 useEffect 的原因
@RunSmeagolRun 是对的，您在这里不需要 useState。只需在添加新帖子并更新状态后发出获取请求，因为状态已更新，它应该重新呈现自己

标签： reactjs infinite-loop use-effect use-state use-context

【解决方案1】：

如果你在 useEffect 中执行 setPost，我假设 posts 被更改，并且你在 useEffect 中添加了 posts 作为依赖项，当然会重新调用它并进入无限循环。确定你想什么时候调用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

【讨论】：

我说这对我来说不是一个解决方案，因为我需要在创建新帖子时更新页面，并将括号留空以避免发生这种情况
你刚刚改变了你的问题！，你之前没有问过这个。

【解决方案2】：

每次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)
        })
    }, [])

【讨论】：

我说这对我来说不是一个解决方案，因为我需要在创建新帖子时更新页面，并将括号留空以避免发生这种情况