谢谢你找到这个.参见here.
当您将函数作为对象的一部分调用时，行为函数也可能取决于使用的对象，even if the function itself doesn't change.下面是一个最简单的例子
useEffect(() => {
obj.fn();
}, [obj.fn]);
可能是个问题:
const Child = ({ obj }) => {
React.useEffect(() => {
obj.fn();
}, [obj.fn]);
return null;
};
const App = () => {
console.log('App rendering');
const [count, setCount] = React.useState(0);
// This fn is stable across renders
const [fn] = React.useState(() => function() { console.log('count is', this.count); });
React.useEffect(() => {
setTimeout(() => {
console.log('Calling setCount; expecting obj.fn to be called again');
setCount(count + 1);
}, 1000);
}, []);
return <Child obj={{ count, fn }} />
};
ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>
deps的要点是让您在回调中的任何内容发生更改时调用effect回调.因为从理论上讲，对对象的更改可能会对执行的逻辑if the object has a method产生更改，所以应该将对象本身添加到依赖关系数组中.
这不会产生错误:
useEffect(() => {
sendRequest(params.quoteId);
}, [params.quoteId, sendRequest]);
因为quoteId不是您正在调用的函数；params中的this并不重要，与我上面的代码片段和您的原始代码相比，在这种情况下，props中的this理论上很重要.
如果你这样做了
useEffect(() => {
sendRequest(params.getQuoteId());
}, [params.getQuoteId, sendRequest]);
这会产生警告，因为现在getQuoteId的调用取决于params是什么.
从对象中删除函数并将函数放入独立标识符中也会删除警告，因为将函数作为独立标识符而不是作为对象的一部分调用会删除函数对对象的可能依赖关系-函数中的this不再引用对象，而是undefined.
一种方法是，当您作为对象的一部分调用函数时，对象本身作为隐藏的附加参数传递给函数，作为函数中的this.
这是:
useEffect(() => {
obj.fn();
}, [obj.fn]);
就像做
const { obj } = fn;
useEffect(() => {
fn.call(obj)
}, [fn]);
这显然是缺少obj作为一个依赖项，即使fn的实现根本不考虑其this.