React useEffect获取错误-缺少依赖项

Question

我尝试使用useEffect，但它得到了如下所示的错误，

React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array

这是我的组件

let id = props.location.pathname.split("--")[1];
let str = props.location.pathname.split("--")[0].substr(1);
const data = {id: id, link: str}
const [title, setTitle] = useState("")
useEffect(() => {
setTitle("...") // Yükleniyor.
async function getTitle() {             
axios.post('/api/data/entry/get', data)
.then(res => {
setTitle(res.data.title)
// TODO: Catch ekle.
})
}
getTitle()
}, [props])

Answer 1

您必须将数据添加到依赖项列表中，如下面的

let id = props.location.pathname.split("--")[1];
let str = props.location.pathname.split("--")[0].substr(1);
const data = {id: id, link: str}
const [title, setTitle] = useState("")
useEffect(() => {
setTitle("...") // Yükleniyor.
const getTitle = async () => {
const res = await 
axios.post('/api/data/entry/get', data)
setTitle(res.data.title)
// TODO: Catch ekle.
};
getTitle()
}, [props])

Answer 2

您必须在依赖数组中包含"data"。这是因为钩子在回调中使用它。

这样，每当依赖数组中的一个变量发生更改时，就会调用钩子。

我注意到"data"对象使用组件属性中的值。你可能会说"好吧，为什么我要同时包含道具和数据？"好吧，在定义依赖数组时，你需要尽可能细化。让它依赖道具太笼统了。在你的情况下，你应该让它只依赖于"数据">

编辑

我忽略了这样一个事实，即如果要添加data作为依赖项，那么每次重新渲染时都会触发钩子。这是因为data基本上是每次渲染的新对象。您可以将data的成员分离为变量，并将其用作依赖项：

你的组件现在看起来是这样的：

const id = props.location.pathname.split("--")[1];
const str = props.location.pathname.split("--")[0].substr(1);
const data = useRef({id: id, link: str});
const [title, setTitle] = useState("")
useEffect(() => { /* ... */ }, [id, str]);

请注意，我还没有测试代码。请看看这是否有效。