Question

我试图使用fetch api从服务器中获取数据，并使用uuidv4作为键将数据显示在无序列表中，我试图使用react的useEffect钩子来执行此操作，但是，它先获取数据，然后说我所有的键都是一样的，我认为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;

Answer 1

我认为您必须调用它才能生成uuid：

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

Answer 2

在列表上进行映射时，分配或设置键的最佳方法是使用index，您可以从地图上获取

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

我正在尝试使用useEffect react钩子从服务器获取数据

2 个答案: