为什么我的 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吗？在调查此问题时拥有更多代码会很棒。

标签： ruby-on-rails reactjs axios react-hooks react-on-rails

【解决方案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 只会被调用一次，您将不再有无限循环

【讨论】：