为什么我的 axios get 调用一遍又一遍地重复使用 React.useEffect 从 Rails 后端获取？

Question

我在带有 Hooks 的 React 前端上使用 axios 来发出获取请求，以使用我的 rails 后端中的种子数据填充我的 react-google-maps/api GoogleMaps 标记组件。当我让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 的项目

Answer 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 get 调用一遍又一遍地重复使用 React.useEffect 从 Rails 后端获取？

Why is my axios get call repeating over and over using React.useEffect to fetch from Rails backend?

ruby-on-rails

reactjs

axios

react-on-rails

react-hooks