反应-更新组件会影响其他组件

问题描述

我已经使用ReactJS为自己的网站制作了一个自定义 404 页面。它包含2个组件，例如以下代码。

const PageNotFound = () => (
  <div className="not-found">
    <Helmet title="404" />
    <PageNotFoundMain />
    <Footer404 />
  </div>
);

在这里，PageNotFoundMain是一个组件，它显示来自我的一组报价的具有 typing 效果的随机报价，并每x秒更新一次。此组件显示的文本非常完美，符合预期。

但是问题是，当显示任何新报价时，Footer404组件也会重新加载。

所以，我的问题是，我在这里犯了什么愚蠢的错误？自3个小时以来，我一直在努力解决问题。

以下是相关代码：

PageNotFoundMain

const PageNotFoundMain = () => {
  const hold = 60; // ticks to wait after message is complete before rendering next message
  const delay = 50; // tick length in mS

  const [idx,updateIter] = useState(0); // points to current message
  const [message,updateMessage] = useState(messages[idx]); //messages is the array of quotes.
  const [char,updateChar] = useState(messages[idx].length); // points to current char
  const [isActive,setIsActive] = useState(true); // disable when all messages are printed

  useInterval(() => {
    let newIdx = idx;
    let newChar = char;
    if (char - hold >= messages[idx].length) {
      newIdx += 1;
      newChar = 0;
    }
    if (newIdx === messages.length) {
      setIsActive(false);
    } else {
      updateMessage(messages[newIdx].slice(0,newChar));
      updateIter(newIdx);
      updateChar(newChar + 1);
    }
  },isActive ? delay : null);

  return (
    <div>
      <Helmet title="404" />
          <div
            className="not-found"
            style={validateText(message) ? {} : { color: 'red' }}
            onMouseEnter={() => setIsActive(false)}
            onMouseLeave={() => (idx < messages.length) && setIsActive(true)}
          >
              <h1>{message}</h1>
          </div>
    </div>
  );
};

在这里，useInterval在此文件的前面声明，它以callback function和delay作为参数。我觉得我的错误是不需要的，因此不要发布。

Footer404

const Footer404 = () => (
  <div className="not-found">
    <Helmet title="404" />
    <p className="not-found">Return to <Link to="/">Homepage</Link></p>
    
    <ul className="icons">
          {data.map((s) => (
            <li key={s.label}>
              <a href={s.link}>
                <FontAwesomeIcon icon={s.icon} />
              </a>
            </li>
          ))}
        </ul>
  </div>
);

您可能已经猜到了，我是React的新手，这是我在React课程中基于项目学习的一部分。请让我知道是否需要更多详细信息。谢谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript react-component reactjs reactjs