useEffect无限循环网络请求

Question

我在网络上收到了无限的请求，这是由于我的useEffect。我知道这个问题是因为我把useEffect函数中的"posts"one_answers"setPost"作为第二个参数放在括号中，但每当我添加新的post时，我都需要呈现页面，所以"post"必须在括号内。

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])

Answer 1

如果你在useEffect中执行setPost，我假设posts正在更改，并且你在useEffect中添加了posts作为依赖项，当然它会重新调用，并进入无限循环。请确定何时调用postsAPI。

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

Answer 2

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

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