reactjs API调用中为什么会出现cancel

f5emj3cl 于 12个月前发布在 React

关注(0)|答案(1)|浏览(124)

在父组件中，open和setOpen状态被传递给子组件，在useEffect中，open作为fetchData和dependency被包含。在子组件中，open作为依赖添加到useEffect中的其他fetchData中。但是，getApi（）在子组件中被取消。如果您直接在子组件中声明open和setOpen状态，它将正常工作，但必须使用父对象的开放依赖项更新数据。

parent.tsx

const [open, setOpen] = useState(false);
const [post, setPost] = useState([]);

const fetchData = async() => {
  const res = await getPost();
  setPost(res);

useEffect(() => {
  fetchData();
}, [open]);

<Child open={open} setOpen={setOpen} />

个字符

reactjs

来源：https://stackoverflow.com/questions/77762490/why-cancel-occurs-in-api-calls

1条答案

按热度按时间

lmyy7pcs1#

在子组件中，该问题是由useEffect中的open依赖引起的。为了防止在父组件中open发生变化时取消API调用，您可以为open使用ref。

import { useRef, useEffect } from 'react';

const Child = ({ open, setOpen }) => {
  const userRef = useRef();

  const fetchData = async () => {
    const res = await getUser();
    userRef.current = res;
  }

  useEffect(() => {
    fetchData();
  }, []);

  useEffect(() => {
    if (open) setUser(userRef.current);
  }, [open]);

  return (
    <>
      <button onClick={() => setOpen(true)}>Click</button>
      {open && user && (
        <Modal onCancel={() => { setOpen(false); setUser(null); }} />
      )}
    </>
  );
}

字符串

赞(0）回复(0）举报 12个月前

我来回答

reactjs API调用中为什么会出现cancel

1条答案

相关问题

热门标签

最新问答