为啥我的 axios 使用 React.useEffect 一遍又一遍地从 Rails 后端获取调用?

Posted

技术标签:

【中文标题】为啥我的 axios 使用 React.useEffect 一遍又一遍地从 Rails 后端获取调用?【英文标题】:Why is my axios get call repeating over and over using React.useEffect to fetch from Rails backend?为什么我的 axios 使用 React.useEffect 一遍又一遍地从 Rails 后端获取调用? 【发布时间】:2020-09-09 13:31:11 【问题描述】:

我在带有 Hooks 前端的 React 上使用 axios 来发出获取请求,以使用我的 rails 后端中的种子数据填充我的 react-google-maps/api GoogleMaps Marker 组件。当我让 rails 服务器运行时,服务器会反复进行此调用。

以下行导致axios.get 在循环中被调用:

 React.useEffect(() => 
        // Get Coordinates from api
        // Update Coordinates in state
        axios.get('/api/v1/coordinates.json')
        .then(response => response.data.data.map(coord => 
              setCoordinateFromApi(coord.attributes)))
        .catch(error => console.log(error))
    , [coordinates.length]) 

这成功地填充了地图,但意味着我不能使用 onClick's 功能(因为我认为堆栈正在被这个请求置顶?)

我在 Rails 中的 CoordinatesController 上的索引方法:

def index
  coordinates = Coordinate.all
  render json: CoordinateSerializer.new(coordinates).serialized_json
end

注意:这是我第一个将 React 链接到 Rails 以及使用 Hooks 的项目

【问题讨论】:

你试过从React.useEffect的依赖数组中删除依赖coordinates.length吗?在调查此问题时拥有​​更多代码会很棒。 【参考方案1】:

我假设您在上面定义了这个 useState:

const [coordinated, setCoordinatesFromApi] = useState([])

如果是,那么这就是根本原因:

React.useEffect(() => 
  axios.get(...).then(coordinates => setCoordinateFromApi(coord.attributes))
, [coordinates.length])

通过这样做,您要求 React.useEffect 在coordinates.length 更改时始终调用axios.get。这将使这个 useEffect 成为一个无限循环(因为每当 axios 请求完成时,您总是会更改坐标值)。

如果你只想执行一次,你应该在 useEffect 上传递一个空数组,像这样

React.useEffect(() => 
  axios.get(...).then(coordinates => setCoordinateFromApi(coord.attributes))
, [])

这样,您的axios.get 只会被调用一次,您将不再有无限循环

【讨论】:

以上是关于为啥我的 axios 使用 React.useEffect 一遍又一遍地从 Rails 后端获取调用?的主要内容,如果未能解决你的问题,请参考以下文章

为啥我的 Axios 实例没有在捕获的错误中返回响应?

为啥我的后端中的 axios 发布请求没有将任何数据发送回我的外部 api? -

为啥我的 Axios fetch 会出现 CORS 错误?

为啥我的 axios 删除函数会出现 CORS 错误? [关闭]

为啥我使用 axios 获取数据时出现错误 500

(Vue) Axios 设置数据不适用于 2 个属性。我无法解释为啥