反应使用效果获取错误-缺少依赖[重复]

Question

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

React Hook useffect缺少依赖项：“data”。包括它或删除依赖项数组

这是我的组件，

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

您必须在依赖数组中包含“数据”。这是因为您的钩子在回调中使用它。

这样，每次更改依赖项数组中的一个变量时都会调用钩子。

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

编辑

我忽略了这样一个事实，即如果要将数据添加为依赖项，那么每次重新渲染都会触发钩子。这是因为基本上，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]);

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

Answer 2

您必须向依赖项列表中添加数据，如下所示

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