ruby-on-rails 为什么我的axios会一遍又一遍地重复使用React.useEffect？

oknrviil 于 2023-03-04 发布在 Ruby

关注(0)|答案(1)|浏览(180)

我在React w/ Hooks前端使用axios发出get请求，使用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])

这成功地填充了map，但意味着我不能使用onClick's功能（因为我假设堆栈顶部有此请求？）
我在Rails中CoordinatesController上的索引方法：

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

NB：这是我第一个将React链接到Rails并使用Hooks的项目

ruby-on-rails

来源：https://stackoverflow.com/questions/61959581/why-is-my-axios-get-call-repeating-over-and-over-using-react-useeffect

1条答案

按热度按时间

ttygqcqt1#

我假设您有上面定义的useState：

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

如果是，那么这就是根本原因：

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

这样，只要coordinates.length发生变化，React.useEffect就会调用axios.get，这将使useEffect成为一个无限循环（因为只要axios请求完成，坐标值就会发生变化）。
如果只想执行一次，则只需在useEffect上传递一个空数组，如下所示

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

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

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

我来回答

ruby-on-rails 为什么我的axios会一遍又一遍地重复使用React.useEffect？

1条答案

相关问题

热门标签

最新问答