react函数组件清除localStorage

要在React函数组件中清除localStorage，可以使用useEffect钩子来执行清除操作。

首先，导入React和useEffect钩子：

import React, { useEffect } from 'react';

然后，在函数组件中使用useEffect钩子来清除localStorage：

const MyComponent = () => {
  useEffect(() => {
    localStorage.clear();
  }, []);

  // 组件的其它代码...

  return (
    // 组件的JSX代码...
  );
};

在上面的代码中，useEffect钩子的第一个参数是一个回调函数，它会在组件挂载后执行一次。我们在这个回调函数中调用localStorage.clear()来清除localStorage的所有数据。

第二个参数是一个空数组，表示useEffect只在组件挂载时执行一次。这样可以确保清除操作只在组件挂载时执行一次，而不会被重复调用。

请注意，这个清除操作只会在组件挂载时执行一次，如果你希望在组件卸载时清除localStorage，可以在useEffect的回调函数中返回一个清除函数：

const MyComponent = () => {
  useEffect(() => {
    localStorage.clear();

    return () => {
      // 在组件卸载时执行清除操作
      localStorage.clear();
    };
  }, []);

  // 组件的其它代码...

  return (
    // 组件的JSX代码...
  );
};

这样，在组件卸载时，清除函数会被调用，以确保localStorage被清空