Reactjs 未捕获错误：重新渲染过多。React限制渲染的数量以防止无限循环。作出反应、许诺

我试图将一些axios调用结果呈现到映射到当前组件的餐厅信息列表中。所以axios调用结果是我当前位置到餐厅位置之间的距离，我正在使用google distance matrix API。 所以其中一个参数（我的当前位置）是常量，我想生成我的当前位置到我将在此组件上列出的每个餐厅之间的距离。因此，我将道具映射到当前组件上，如下所示：

`return (
      <div>
        <ul>
          {props.restaurants.map((item, index) => {
            return (
              <div>
                <h3>{item.name}</h3>
                <p>
                  {item.description}
                  <br />
                  {item.address}
                  <br />
                  {item.phone}
                  <br />
                  {distance}
                </p>
              </div>
            );
          })}
        </ul>
      </div>
    );`

因此，我尝试在.map循环中每次更新resplaceid，然后使用usEffect获得新的距离。但是，我收到以下错误消息：

Uncaught error:重新渲染过多。React限制渲染的数量以防止无限循环。

有谁能帮我处理那个错误消息吗

---

或者，如果有更好的方法渲染到每个餐厅的距离？

这里的错误是，您正在更新状态，而它渲染时，

setCurPlaceID（item.place\u id）

您应该在效果内部调用它：D
您正在渲染内部调用
setCurPlaceID（item.place\u id）
，然后执行useffect，其依赖项中包含
resplaceid

每次
props.restaurants.map（）
循环时，都会执行
setCurPlaceID（item.place\u id）
，然后执行useffect，循环会继续进行

调用
setCurPlaceID（item.place\u id）在useEffect中而不是在渲染中
谢谢您的回复，我是新来的。所以我应该添加另一个像这样的useEffect:useEffect（（）=>{for（让props.restaurants的项）{setCurPlaceID（item.place_id）}？我将所有“getDistance”调用组合在一个调用中，这样您就不会在每个resturantListItem呈现后调用API。您的expressJS服务可以接受一个place_id数组，并返回每个位置的距离，这样您就不会在每个列表项呈现后调用API。然后，为每个餐厅提供“distance”node，这样当你呈现列表时，你可以通过'props.item.distance'访问距离，而不是在每个'list item'呈现在useEffect中后调用API谢谢你的回复，我对react hooks是新手。所以我应该添加另一个useEffect，如下所示：useEffect（（）=>{for（let item of props.restaurants）{setCurPlaceID（item.place id）}？此外，如果我在渲染方法的外侧更新CurPlaceId，我如何知道渲染到正确餐厅位置的距离？
`import React, { useState, useEffect } from 'react';
import axios from 'axios';

const RestaurantsList = (props) => {
  const [restPlaceId, setCurPlaceID] = useState();
  const [distance, setDistance] = useState([]);

  useEffect(() => {
    axios
      .get(`/distance/?org=${props.currentPlaceId}&des=${curPlaceId}`)
      .then((result) => {
        setDistance(result);
      });
  }, [restPlaceId]);

  if (props.restaurants.length === 0) {
    return <span>please wait for related product to load</span>;
  } else {
    return (
      <div>
        <ul>
          {props.restaurants.map((item, index) => {
            setCurPlaceID(item.place_id);

            return (
              <div>
                <h3>{item.name}</h3>
                <p>
                  {item.description}
                  <br />
                  {item.address}
                  <br />
                  {item.phone}
                  <br />
                  {distance}
                </p>
              </div>
            );

            
          })}
        </ul>
      </div>
    );
  }
};

export default RestaurantsList;`