useEffect() 在重新渲染组件时不会被调用。它仅在文件更改后被调用一次

Question

react组件的useEffect()部分只在我对文件进行更改并保存文件后第一次渲染SingleStock组件时调用。我不知道为什么会这样。

import useAuthContext from "../hooks/useAuthContext" 
import StockDetails from "./StockDetails"
import TableHeader from "./TableHeader"
import useStocksContext from '../hooks/useStocksContext'
import { useEffect, useState } from "react"
const SingleStock = () => {
console.log('SS RENDERED')
const {user} = useAuthContext()
const {stocks, dispatch} = useStocksContext()
const [stock, setStock] = useState({})
const id = window.location.pathname.split('/')[1]
useEffect(() => {
if (!user) {
return
}
const fetchStock = async () => {
const response = await fetch(`/api/stocks/${id}`, {
headers: {
'Authorization': `Bearer ${user.token}`
}
})
let json = await response.json()
setStock(json)
}
console.log('hey there')
if (user) {
fetchStock()
}
}, [])
console.log(stock)

return (
<div>
<TableHeader/>
{stock && <StockDetails 
key={stock._id}
stock={stock}
/>}
</div>
)
}
export default SingleStock

我知道SingleStock正在重新渲染，因为我的console.log语句在文件的顶部。我知道useEffect()没有运行，因为状态stock没有被设置和"嘿，那里"没有被记录到控制台。我卡住了。

Answer 1

useEffect有三种情况

1-如果你想让它在每次渲染中执行，你不应该指定prop数组，像这样:

useEffect(() => {
//Runs on every render
});

2-如果你想让它在第一次渲染时执行，就像componentDidMount一样，像这样使用它:

useEffect(() => {
//Runs only on the first render
}, []);

3-如果你想根据一个值或多个值的变化来执行它，像这样使用它:

useEffect(() => {
//Runs on the first render
//And any time any dependency value changes
}, [value1, value2]);

在你的情况下，我想你应该使用第一种方法