时间戳

首页 > 解决方案 > 我正在尝试使用 useEffect 反应钩子从服务器获取数据

javascript - 我正在尝试使用 useEffect 反应钩子从服务器获取数据

问题描述

我正在尝试使用 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;

标签： javascriptreactjs

解决方案

我认为你必须调用它来生成 uuid：

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

推荐阅读