为什么我的 axios 使用 React.useEffect 一遍又一遍地重复调用?

Question

我在带有钩子前端的 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 中的坐标控制器上的索引方法：

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