React 分段控制器渲染问题

最新推荐文章于 2024-11-08 15:59:45 发布

huoyueyi

最新推荐文章于 2024-11-08 15:59:45 发布

阅读量363

点赞数 8

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/kyrie_mvp/article/details/137641291

版权

文章讲述了在使用React和AntDesign开发中，如何解决订单列表页与销售详情页的分段控制器状态刷新问题，通过localStorage存储选中项并结合useLocation和useEffect钩子实现路由变化时自动更新分段控制器内容，确保从其他页面返回时保持正确状态。

摘要由CSDN通过智能技术生成

组件框架 : react + ant
这是订单列表页
这是销售详情页

问题 : 在销售页刷新页面 , Segmented(分段控制器)的内容会刷新为订单页 , 如图

// 第一版的写法
const [selectedOption, setSelectedOption] = useState(1);

 const onChange = (value) => {
    setSelectedOption(value);
    localStorage.setItem('selectedOption', value.toString());

    switch (value) {
      case 1: {
        navigate('/books/order-management/dataset');
        break;
      }
      case 2: {
        navigate('/books/order-management/sale-statistics');
        break;
      }
    }
  };

  return (
    <div style={{ maxHeight: 790 }} className='salesTop'>
      <Segmented
        options={options}
        onChange={onChange}
        value={selectedOption}
        style={{ marginBottom: 20 }}
      ></Segmented>
      <Outlet />
    </div>
  );

解决 : 将分段控制器的状态存在本地 , 这样不会默认回到第一页 , 解决了上述问题 , 又出现了新的问题 (从销售页切换到其他页面后 , 再返回 , 分段控制器是销售员 , 内容却不是) , 如图

// 第二版的写法,将分段控制器的状态保存在本地localStorage  

  // const [selectedOption, setSelectedOption] = useState(1);
  const [selectedOption, setSelectedOption] = useState(() => {
    return parseInt(localStorage.getItem('selectedOption'), 10) || 1;
  });

  useEffect(() => {
    if (selectedOption !== parseInt(localStorage.getItem('selectedOption'), 10)) {
      localStorage.setItem('selectedOption', selectedOption.toString());
    }
  }, [selectedOption]);

  const location = useLocation();


const onChange = (value) => {
    setSelectedOption(value);
    localStorage.setItem('selectedOption', value.toString());

    switch (value) {
      case 1: {
        navigate('/books/order-management/dataset');
        break;
      }
      case 2: {
        navigate('/books/order-management/sale-statistics');
        break;
      }
    }
  };

  return (
    <div style={{ maxHeight: 790 }} className='salesTop'>
      <Segmented
        options={options}
        onChange={onChange}
        value={selectedOption}
        style={{ marginBottom: 20 }}
      ></Segmented>
      <Outlet />
    </div>
  );

最终解决 : 通过`useLocation`钩子获取当前路由的位置信息 , 结合`useEffect`来监测当前路径，从而设置`selectedOption`的值 , 这样再从其他页面返回就不会出现分段控制器和内容不一的问题

// 最终版  
// const [selectedOption, setSelectedOption] = useState(1);
  const [selectedOption, setSelectedOption] = useState(() => {
    return parseInt(localStorage.getItem('selectedOption'), 10) || 1;
  });

  useEffect(() => {
    if (selectedOption !== parseInt(localStorage.getItem('selectedOption'), 10)) {
      localStorage.setItem('selectedOption', selectedOption.toString());
    }
  }, [selectedOption]);

  const location = useLocation();

  useEffect(() => {
    // 当路由改变时，根据当前路径设置selectedOption
    if (location.pathname === '/books/order-management/dataset') {
      setSelectedOption(1);
      localStorage.setItem('selectedOption', '1');
    } else if (location.pathname === '/books/order-management/sale-statistics') {
      setSelectedOption(2);
      localStorage.setItem('selectedOption', '2');
    }
  }, [location.pathname, setSelectedOption]);


  const onChange = (value) => {
    setSelectedOption(value);
    localStorage.setItem('selectedOption', value.toString());

    switch (value) {
      case 1: {
        navigate('/books/order-management/dataset');
        break;
      }
      case 2: {
        navigate('/books/order-management/sale-statistics');
        break;
      }
    }
  };

  return (
    <div style={{ maxHeight: 790 }} className='salesTop'>
      <Segmented
        options={options}
        onChange={onChange}
        value={selectedOption}
        style={{ marginBottom: 20 }}
      ></Segmented>
      <Outlet />
    </div>
  );