React componentWillunMount挂钩（使用效果）与React Hook（Usestate）阵列空无一人吗？

发布于 2025-02-13 04:21:36 字数 671 浏览 0 评论 0原文

在componentwillunmount上，我想在usestate内部将数组发送到posttrequest函数。

我的USESTATE数组：

     const [array, setArray] = useState([]);

我的componentWillunMount函数：

useEffect(() => {
    return () => {
      console.log(array); // logs "[]"
    // TODO: Send to a post request to BE
    }
  }, [])

我也具有“正常”使用效果，可在我的Usestate数组上倾听。当我在其中添加三个元素时，控制台日志显示里面有三个elemetns

  useEffect(() => {
      console.log('array: ', array); // logs "(3) [{…}, {…}, {…}]" 
    }, [array]);

在我的componentwillunmount函数中为空数为空？

编辑：将数组添加到使用效果的依赖的依赖性中，每次更新数组时都会执行该函数，这不是所需的内容。该函数只能在卸载时执行数组的值

原文

Upon componentWillUnmount I want to send an array inside a useState to a postRequest function.

My useState array:

     const [array, setArray] = useState([]);

My componentWillUnmount function:

useEffect(() => {
    return () => {
      console.log(array); // logs "[]"
    // TODO: Send to a post request to BE
    }
  }, [])

I do also have a "normal" useEffect that listens on my useState array. When I add three elements inside it, the console logs shows there are three elemetns inside it

  useEffect(() => {
      console.log('array: ', array); // logs "(3) [{…}, {…}, {…}]" 
    }, [array]);

How come the array is empty in my componentWillUnmount function?

Edit: Adding array to the dependecy of the useEffect will make the function execute every time that array is updated, which is not what is desired. The function should only execute upon unmount with the values of the array

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

揽月 2025-02-20 04:21:37

这是因为该变量的值没有在挂钩内部更改，因为它在componentDidmount上启动，并且由于第二个参数为空，因此未收到更新。

由于您只想在组件卸载而不是每次值都会变化时触发一次：

您可以使用useref“保留”值，而无需重新启动组件。

const ref = useRef();

useEffect(() => {
  ref.current = array;
}, [array]);

useEffect(() => {
  return function cleanup() {
    console.log(ref.current); // here is your array
  };
}, []);

It's because the value of the variable did not changed inside hook because it initiated on componentDidMount and did not received an update because the second parameter is empty.

Since you only want to trigger it once if the component unmounts and not every time the value changes:

you can use useRef to "preserve" the value without rerendering the component.

const ref = useRef();

useEffect(() => {
  ref.current = array;
}, [array]);

useEffect(() => {
  return function cleanup() {
    console.log(ref.current); // here is your array
  };
}, []);

回复收藏 0 原文

望喜 2025-02-20 04:21:37

当将空依赖关系数组作为第二个参数传递给使用效果时，useffect回调中的代码只能在MOUNT上运行。此刻，数组仍然空。

当您还将数组添加到这样的第一个使用效果的依赖项数组中时，它是否有效？

useEffect(() => {
    return () => {
      console.log(array); // logs "[]"
    // TODO: Send to a post request to BE
    }
  }, [array])

顺便说一句，我认为您也可以将两者结合在一起：

useEffect(() => {
    console.log('array: ', array); // logs "(3) [{…}, {…}, {…}]" 

    return () => {
      console.log(array); // logs "[]"
    // TODO: Send to a post request to BE
    }
  }, [array])

When passing an empty dependency array as second argument to useEffect, the code inside the useEffect callback will only be run on mount. At this moment, array is still empty.

Does it work when you also add the array to the dependency array of the first useEffect like this?

useEffect(() => {
    return () => {
      console.log(array); // logs "[]"
    // TODO: Send to a post request to BE
    }
  }, [array])

BTW, I think you can also combine the two like this:

useEffect(() => {
    console.log('array: ', array); // logs "(3) [{…}, {…}, {…}]" 

    return () => {
      console.log(array); // logs "[]"
    // TODO: Send to a post request to BE
    }
  }, [array])

回复收藏 0 原文

~没有更多了~