我正在尝试使用 fetch api 从服务器获取数据，并使用 uuidv4 作为键在无序列表中显示这些数据，我尝试使用 react 的 useEffect hook 来执行此操作，但是，它获取了数据，但随后它说我所有的键都相同，我认为 useEffect 是原因，我尝试添加第二个参数一个空数组以防止重新渲染，但随后它说我缺少一个依赖项，当我将依赖项放入其中时，它会重新渲染，并且 uuid 又相同了。我不知道该怎么做，我对钩子还比较陌生。

    import React, { useState, useEffect } from "react";
    import "./App.css";
    const uuidv4 = require("uuid/v4");

    function App() {
      const [country, setCountry] = useState({
        country: []
      });

      useEffect(() => {
        console.log("fetching data");
        fetch("http://localhost:5000/country")
          .then(res => res.json())
          .then(data => setCountry({...country, country: data }));
      }, []);

      return (
        <>
          <ul>
            {country.country.map(item => {
              return <li key={uuidv4}>{item.name}</li>;
            })}
          </ul>
        </>
      );
    }

    export default App;