javascript Axios在加载页面时发出双重发布请求

mmvthczy 于 2023-03-06 发布在 Java

关注(0)|答案(2)|浏览(112)

当我用postman发出这个post请求时，它工作得很好，但是在这个例子中，我的django服务器显示发出了两个请求，数据也记录了两次。

const controller = new AbortController();
    const [isLoading , setIsLoading] = useState(true)
    const [userData , setUserData] = useState({
        name:"",
        username:"",
        email:""
    })

    const getData = () =>{
      axiosInstance.post("/api/detail/" , {
        signal:controller.signal
      })
      .then((data) =>{
        setUserData({
            name : data.data.name,
            username : data.data.username,
            email : data.data.email
          }
          )
          console.log(data) // this data is logged twice 
          setIsLoading(false)
      return controller.abort()

      }).catch((err)=>{
          console.log("error is" , err)
      })
      return controller.abort()
    }
    useEffect(()=>{
        getData()
    } ,[])

JavaScript

来源：https://stackoverflow.com/questions/75630591/axios-making-double-post-request-while-loading-page

2条答案

按热度按时间

f87krz0w1#

您可能正在使用StrictMode。检查主文件（index.js，main.js），看看组件是否如下所示：

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

有关这方面的更多详细信息，您可以查看以下答案：由于严格模式，我的React组件呈现了两次

赞(0）回复(0）举报 2023-03-06

k2arahey2#

useEffect在开发模式下调用两次，如果启用了严格模式，则在生产模式下只运行一次。
您不应该尝试在useEffect中使用useRef和if语句来使其触发一次，或者删除StrictMode，因为react有意在开发中重新挂载您的组件以帮助您查找bug，并且因为该使用效果被调用了两次。https://stackoverflow.com/a/72238236/12083049
我强烈建议使用react-query或swr这样的数据获取库来处理API。
SWR示例：

import useSWR from 'swr'
 
function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher)
 
  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

赞(0）回复(0）举报 2023-03-06

我来回答

javascript Axios在加载页面时发出双重发布请求

2条答案

相关问题

热门标签

最新问答