无限循环获取

Question

国有餐厅从前面的输入表单更改，并在后面更新数据库。然后的想法是显示 RestaurantList 组件以及来自输入的新添加的餐厅。这个想法是不使用 useContext 钩子。每次餐厅状态发生变化时，我都尝试使用 useEffect 挂钩来呈现列表，但这会在我的后端产生无限的 GET 请求。

const RestaurantsList = (props) => {
  const [restaurants, setRestaurants] = useState("");

  useEffect(async () => {
    try {
      const response = await fetch("http://localhost:3001/api/v1/restaurants");
      const data = await response.json();
      setRestaurants(data);
      console.log(data);
    } catch (err) {
      console.log(err);
    }
  }, [restaurants]);

...

使用此代码，前端更新正常并显示新餐厅，但后端继续发出获取请求。如果餐馆状态没有改变，为什么会发生这种情况？有什么推荐吗？我怎样才能避免这个循环？

我已经尝试了一种可行的方法，即在单击添加按钮时删除 preventDefault 事件。这样，页面重新加载并做我想做的事，但我不知道这是否是最佳实践：

const AddRestaurant = () => {
  const [name, setName] = useState("");
  const [location, setLocation] = useState("");
  const [priceRange, setPriceRange] = useState("");


 const handleSubmit = async function (e) {
    //e.preventDefault();

    try {
      await fetch("http://localhost:3001/api/v1/restaurants", {
        method: "POST",
        made: "cors",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name,
          location,
          price_range: priceRange,
        }),
      });
    } catch (err) {
      console.log(err);
    }
    setName("");
    setLocation("");
    setPriceRange("");
  };
 return (
    <div className="mb-4">
      <form action="" on>
        <div className="form-row">
          <div className="col">
            <input
              type="text"
              value={name}
              className="form-control"
              placeholder="Name"
              onChange={nameUpdate}
            />
          </div>
          <div className="col">
            <input
              className="form-control"
              value={location}
              type="text"
              placeholder="Location"
              onChange={locationUpdate}
            />
          </div>
          <div className="col">
            <select
              className="custom-select my-1 mr-sm-2"
              value={priceRange}
              onChange={(e) => setPriceRange(e.target.value)}
            >
              <option disabled>Price Range</option>
              <option value="1">$</option>
              <option value="2">$$</option>
              <option value="3">$$$</option>
              <option value="4">$$$$</option>
              <option value="5">$$$$$</option>
            </select>
          </div>
          <button className="btn btn-primary" onClick={handleSubmit}>
            Add
          </button>
        </div>
      </form>
    </div>
  );
};

export default AddRestaurant;

Answer 1

你是说RestaurantsList() 正在抛出无限循环吗？我在这里看到的一切都是前端代码。你得到一个无限循环的原因是你在你的useEffect 钩子中有一个[restaurants] 的依赖项。每次它抓取该数据时，它都会更新，导致它再次调用该函数。如果您只想让它获取一次数据，则将依赖项数组留空。

试试这个：

   const [restaurants, setRestaurants] = useState("");
   
   useEffect(() => {
            const fetchData = async () => {
            const response = await fetch('http://localhost:3001/api/v1/restaurants')
            const data = await response.json();
            console.log(data);
            setRestaurants(data);
        }
        fetchData();
    }, []);```