具有 useEffect 依赖性的无休止的 XHR 请求

Question

所以我只是做了一个简单的 CRUD 应用程序，useEffect 钩子有点问题，我想在每次提交新的 post 时重新呈现从数据库中获取的 post 列表]，所以我想包含“fetchData”useState 变量作为 useEffect 的依赖项，但它以无限循环的 xhr 请求结束。这是代码

const [fetchedData, setFetchedData] = useState([]);
const [title, setTitle] = useState("");
const [content, setContent] = useState("");

 useEffect(() => {
    (async () => {
      try {
        const { data } = await axios.get("http://localhost:5000/posts");
        setFetchedData(data);
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    })();
  }, [fetchedData]);

  const onSubmit = async (e) => {
    e.preventDefault();
    if (title.length > 5 && content.length > 10) {
      try {
        await axios.post("http://localhost:5000/posts", { title, content });
      } catch (error) {
        console.log(error);
      }
    } else {
      alert(
        `You entered ${title.length} characters for the title and ${content.length} characters for the content of the post. Title must be at least 5 characters long and content at least 10`
      );
    }
  };

如您所见，我将 fetchedData 用作 useEffect 的依赖项，因此每当 fetchData 更改时，我都会重新呈现 post 的整个列表，当我想到它时并没有多大意义，每当我提交新的 post 时，有人对如何重新呈现 post 的列表提出建议吗？有什么想法吗？

Answer 1

避免无限循环的一种方法是不依赖状态变化来获取新数据 -
将提取提取到一个单独的函数中，在组件安装时调用一次，然后在每次成功创建 post 时从你的 onSubmit 调用它：

async function fetchData() {
  try {
    const {data} = await axios.get("http://localhost:5000/posts");
    setFetchedData(data);
  } catch (error) {
    console.log(error);
  }
}

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

const onSubmit = async(e) => {
  e.preventDefault();
  if (title.length > 5 && content.length > 10) {
    try {
      await axios.post("http://localhost:5000/posts", {title, content});
      fetchData(); // call after new post is created
    } catch (error) {
      console.log(error);
    }
  } else {
    alert(
      `You entered ${title.length} characters for the title and ${content.length} characters for the content of the post. Title must be at least 5 characters long and content at least 10`
    );
  }
};

具有 useEffect 依赖性的无休止的 XHR 请求

Endless XHR request with useEffect dependency

crud

reactjs

mern

react-hooks

use-effect