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

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

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

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

编辑

我错过了这样一个事实，即如果您要添加 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]);

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

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