React 分段控制器渲染问题

组件框架 : 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>
  );