使用效率不填充所有状态

发布于 2025-01-20 17:56:57 字数 829 浏览 0 评论 0原文

因此,这是我的代码,我正在尝试通过用户过滤我的报价,我打电话给我所有的报价,所有用户和所有状态都已饱满,但是当我试图过滤用户的用户过滤报价时,状态保持空置,但是当我在我的键盘上击中空格键,状态变得完整,就像空格键正在触发使用效果以填充状态,

const [offer, setOffer] = useState([]);
  const [user, setUser] = useState({});
  const[useroffers,setUseroffer]=useState([]);


  const isOffer = async () => {
    const oflg = await GetAllOff();
    setOffer(oflg);
  };


  const isLoggedIn = async () => {
    const userLg = await CurrentUser();
    setUser(userLg.data.user);
  };

  const isUseroffer = async()=>{
   setUseroffer(offer.filter((el)=>el.createdbyId === user._id));
  };
 
 
  useEffect( () => {
    isOffer();
    isLoggedIn();
    isUseroffer();
  }, []);
  console.log(offer);
  console.log(user)
  console.log(useroffers); 

因此使用效果正在填充报价和用户状态,但没有填充用户offers state state intil i mign

SO this is my code, i'm trying to filter my offers by there users , i have called all my offers and all my user and there states are full but when i try to filter offers by there users the state stay empty but when i hit spacebar on my keyboard the state get full like it's the spacebar is triggering useEffect to fill the state

const [offer, setOffer] = useState([]);
  const [user, setUser] = useState({});
  const[useroffers,setUseroffer]=useState([]);


  const isOffer = async () => {
    const oflg = await GetAllOff();
    setOffer(oflg);
  };


  const isLoggedIn = async () => {
    const userLg = await CurrentUser();
    setUser(userLg.data.user);
  };

  const isUseroffer = async()=>{
   setUseroffer(offer.filter((el)=>el.createdbyId === user._id));
  };
 
 
  useEffect( () => {
    isOffer();
    isLoggedIn();
    isUseroffer();
  }, []);
  console.log(offer);
  console.log(user)
  console.log(useroffers); 

So useEffect is filling the offers and user States but not filling the useroffers state intil i click on the spacebar

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

那些过往 2025-01-27 17:56:57

用户offers都取决于用户goder> goder,但是您试图以与这两个相同的渲染周期进行设置。更新的状态值直到设置渲染循环后才可用,因此setUserOffers无法访问正确更新所需的值。为了解决此问题,您可以声明第二个useffect,该取决于usergode> gode> goder,以便随着这些值的更新,因此您过滤后的数组也是如此。

  const [offer, setOffer] = useState([]);
  const [user, setUser] = useState({});
  const [useroffers, setUseroffer] = useState([]);

  const isOffer = async () => {
    const oflg = await GetAllOff();
    setOffer(oflg);
  };

  const isLoggedIn = async () => {
    const userLg = await CurrentUser();
    setUser(userLg.data.user);
  };

  useEffect(() => {
    isOffer();
    isLoggedIn();
  }, []);

  useEffect(() => {
    setUseroffer(offer.filter((el) => el.createdbyId === user._id));
  }, [user, offer]);

codesandbox


您可以做到通过等待要约user值,并在单个中都在使用中,然后直接使用它们来设置所有三个状态。 (这将仅导致单个rerender,而不是上一个示例中可能的四个)

  const [offer, setOffer] = useState([]);
  const [user, setUser] = useState({});
  const [useroffers, setUseroffer] = useState([]);

  useEffect(() => {
    const login = async () => {
      const userLg = await CurrentUser();
      const ofLg = await GetAllOff();

      setUser(userLg.data.user);
      setOffer(ofLg);
      setUseroffer(
        ofLg.filter((el) => el.createdbyId === userLg.data.user._id)
      );
    };

    login();
  }, []);

codesandbox

useroffers is dependent on both user and offer but you are trying to set it in the same render cycle as those two. Updated state values aren't available until the render cycle after they are set, so setUseroffers doesn't have access to the values it needs to update properly. To solve this you can declare a second useEffect which is dependent on user and offer so that as those values update so does your filtered array.

  const [offer, setOffer] = useState([]);
  const [user, setUser] = useState({});
  const [useroffers, setUseroffer] = useState([]);

  const isOffer = async () => {
    const oflg = await GetAllOff();
    setOffer(oflg);
  };

  const isLoggedIn = async () => {
    const userLg = await CurrentUser();
    setUser(userLg.data.user);
  };

  useEffect(() => {
    isOffer();
    isLoggedIn();
  }, []);

  useEffect(() => {
    setUseroffer(offer.filter((el) => el.createdbyId === user._id));
  }, [user, offer]);

codesandbox


Alternatively you can do it all in a single useEffect by awaiting the offer and user values and using them directly to set all three states once they are available. (This will result in only a single rerender rather than the possible four in the previous example)

  const [offer, setOffer] = useState([]);
  const [user, setUser] = useState({});
  const [useroffers, setUseroffer] = useState([]);

  useEffect(() => {
    const login = async () => {
      const userLg = await CurrentUser();
      const ofLg = await GetAllOff();

      setUser(userLg.data.user);
      setOffer(ofLg);
      setUseroffer(
        ofLg.filter((el) => el.createdbyId === userLg.data.user._id)
      );
    };

    login();
  }, []);

codesandbox

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文