当用户单击一个按钮时，我正在运行一个函数，该函数更新我的useState并向其中添加一个数组作为数据.该数据稍后被传递到另一个网页，在该网页中，数组对象以不同的方式显示.我遇到了一个问题，我的useState没有更新，而是返回一个空array.我怀疑这与新页面刷新而不是更新useState有关.我只是不确定从这里到哪里go .

为此，我使用了Reaction-Router V6

这是我的父母网页和按钮.

<div className="toggleButtons" key={id}>
  <Link
    to={"/DetailsPage"}
    onClick={toggledItem}
    state={{ data: data }}
    className="primary-ff boxyButton"
  >
    {buttonText}
  </Link>

  <a href={link} className="icon-link" target="_blank">
    <i className="fa-solid fa-arrow-up-right-from-square"></i>
  </a>
</div>

下面是我try 将数组列表传递到我的useState

const softiesInfo = pageContentList.find(({id}) => id == 1);
const palcoInfo = pageContentList.find(({id}) => id == 2);
const tlaxInfo = pageContentList.find(({id}) => id == 3);

const [data, setData] = useState({})

const toggledItem = () => {
  if (id === 1) {
    setData(softiesInfo);
  } else if (id === 2) {
    setData(palcoInfo)
  } else {
    setData(tlaxInfo)
  }
};

这是我的数据应该在我的第二页上呈现的地方.

export default function DetailsPage() {
  const location = useLocation();
  const data = location.state;
  return (
    <div className="header-wrap">
      <h1 className="primary-ff">{data.title}</h1>
      <img src={data.logoImg} alt={data.altLogo} />
    </div>
  )
});

我试着像这样将数据强制输入到我的useState中，结果成功了，但我认为它不是很高效，可以算作编写干净的代码.

const [data, setData] = useState({
  sectionName: "softies-section",
  title: "Softies Ice Cream-Under The Scoop",
  logoImg: softieslogo,
  altLogo: "softies-logo",
  img: softiesPlanner,
  altImg: "Career Day At Pinnacle",
  img2: softiesAccordion,
  constrainContent:
    "lorem a;sdkfj;alskdjfa lksdfjlaksjdl;fkjasldk;fjaslkdfjal;sdkjfalksdjf;laks;dj asflsngealj    sflsdajflkads",
  id: 1,
});