发生错误3秒后反应setTimeout

debugcn 发表于 Dev

丹尼尔·M

我试图让错误在3秒钟后从State数组中删除，这有点工作，但是由于某种原因，它跳回并在1次超时后动作怪异/删除了多个。（在错误功能组件中看到）。

我在状态管理中使用React上下文，希望能得到我的任何帮助。

我将不胜感激任何帮助

您可以在此处实时查看该错误：https : //codesandbox.io/s/flamboyant-jackson-soutv?file=/ src/components/Errors.jsx: 558-567

Errors.jsx

import { SiteContext } from "../context/SiteContext";

const Error = props => {
  const [siteSettings, setSiteSettings] = useContext(SiteContext);
  let errors = siteSettings.errors;
  console.log("Errors", errors);
  let filteredAry = errors.filter(function(obj) {
    return obj.id !== props.id;
  });
  //removed last id , and filteredArray is where we store the new array
  console.log("Filtered array", filteredAry);
  //after 3 seconds we should update the old array with the new array
  useEffect(() => {
    setTimeout(() => {
      setSiteSettings(siteSettings => ({
        ...siteSettings,
        errors: filteredAry
      }));
    }, 3000);
  }, []);

  return <div className="error">{props.error}</div>;
};

const Errors = () => {
  const [site, setSiteSettings] = useContext(SiteContext);
  const addError = () => {
    //find the latest id
    let max = 0;
    if (site.errors.length > 0) {
      max = Math.max.apply(null, site.errors.map(item => item.id)) + 1;
    } else {
      max = 1;
    }
    console.log("Highest id: " + max);
    //add new error to the State,
    setSiteSettings(site => ({
      ...site,
      errors: [...site.errors, { message: "Some error", id: max }]
    }));
  };
  return (
    <div id="errors">
      Error page
      {site.errors.map((error, i) => {
        return <Error id={i} error={error.message} />;
      })}
      <button onClick={addError}>Add error</button>
    </div>
  );
};

export default Errors;

App.js

import "./styles.css";
import { SiteProvider } from "./context/SiteContext";
import Errors from "./components/Errors";

export default function App() {
  return (
    <SiteProvider>
      <div className="App">
        Errors : <Errors />
      </div>
    </SiteProvider>
  );
}

SiteContext.jsx


export const SiteContext = createContext();

export const SiteProvider = props => {
  const [siteSetting, setSiteSetting] = useState({
    errors: []
  });

  return (
    <SiteContext.Provider value={[siteSetting, setSiteSetting]}>
      {props.children}
    </SiteContext.Provider>
  );
};

最好的问候，丹尼尔。

Vivek Doshi

您的代码有2个主要问题：

首先：不更新最新状态，而更新diff旧状态

 let errors = siteSettings.errors;
  console.log("Errors", errors);
  // Will provide the old errors, not the updated once
  // so each time you add new error, you will get diff filtered array
  // for 1 you get 0
  // for 2 you get 1
  // ....
  let filteredAry = errors.filter(function(obj) {
    return obj.id !== props.id;
  });
  useEffect(() => {
    setTimeout(() => {
      setSiteSettings(siteSettings => ({
        ...siteSettings,
        errors: filteredAry
      }));
    }, 3000);
  }, []);

第二：传递索引i，而不是error.id

// here you are passing index, instead of error.id
<Error id={i} error={error.message} />;

解决第一个问题是这会阅读：

  useEffect(() => {
    const id = setTimeout(() => {
      setSiteSettings(siteSettings => {
        // get latest copy of state `siteSettings `
        // and work on that
        let filteredAry = siteSettings.errors.filter(function(obj) {
          return obj.id !== props.id;
        });        
        return {
          ...siteSettings,
          errors: filteredAry
      }});
    }, 3000);
    return () => clearTimeout(id);
  }, [props.id]);

工作演示：