Fetch 使用旧值和更新值运行两次

Question

我有一个获取功能作为组件：

export const FetchBooksBySubject = (selectedValue) => {
    const options = {
      method: `GET`,
    };
    return fetch(`${server}/books?subjects_like=${selectedValue}`, options)
    .then((response) => {
      if(response.ok){
        return response.json()
      }
        throw new Error('Api is not available') 
      })
    .catch(error => {
      console.error('Error fetching data: ', error)
    })
}

我在 App.js 中使用的这个函数的想法是，每次运行获取，值都会更新：

useEffect(() => {
   if(selectedValue) {FetchBooksBySubject(selectedValue).then(data => setBookList(data))};
  }, [selectedValue])

   
  const handleChange = e => {
    setSelectedValue(e);
    FetchBooksBySubject(selectedValue);
    
  };

所以它有效，但是当我设置新值时，运行基本上是一个双重请求。 Firts 是更新前的值，second 是更新后的值。为什么？是否有机会运行仅针对更新值？

Answer 1

首先，FetchBooksBySubject 不是有效的函数组件。组件应该 return React element.

const element = <h1>Hello, world</h1>;

FetchBooksBySubject 只是一个函数 returns a Promise，因此您应该将其重命名为 fetchBooksBySubject。

其次，你的FetchBooksBySubject运行两次是很自然的。第一次是 selectedValue 变化的时候。查看 official document 关于 useEffect 的内容。当您在依赖项数组中提供一些值时，值的更改将再次触发 useEffect 到运行。

useEffect(() => {
   if(selectedValue) {FetchBooksBySubject(selectedValue).then(data => setBookList(data))};
}, [selectedValue])

第二次调用fetching是在setSelectedValue之后，你是手动调用fetch函数。所以如果你不需要它就删除它。

const handleChange = e => {
    setSelectedValue(e);
    FetchBooksBySubject(selectedValue); // function called manually
};

Fetch 使用旧值和更新值运行两次

Fetch runs double with old and updated value

reactjs

use-effect