Question

从此处实施挂钩代码时

https://blog.logrocket.com/patterns-for-data-fetching-in-react-981ced7e5c56/

我收到以下警告，这实际上是什么意思？

./ src / components / Users.tsx 20：6行：React Hook useEffect缺少依赖项：'data.users'。包括它或删除依赖项数组。如果'setData'需要'data.users'当前值'data.users'react-hooks / exhaustive-deps

，也可以用useReducer替换多个useState变量。

代码：

import React, { useEffect, useState } from "react";
import axios from "axios";
const USER_SERVICE_URL = "https://jsonplaceholder.typicode.com/users";

export function List() {
  const [data, setData] = useState({ users: [], isFetching: false });

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        setData({ users: data.users, isFetching: true });
        const response = await axios.get(USER_SERVICE_URL);
        setData({ users: response.data, isFetching: false });
      } catch (e) {
        console.log(e);
        setData({ users: data.users, isFetching: false });
      }
    };
    fetchUsers();
  }, []);

  console.log(data)

Answer 1

这意味着，由于您在data.users块内的代码中使用了useEffect，并且定义了一个空的依赖项数组，因此data.users可能是过时的。

要解决该问题，请使用setState updater function。可以在创建新状态时使用先前状态：

    setData(data => ({ users: data.users, isFetching: true }));

或

    setData(data => ({ users: data.users, isFetching: false }));

另一种选择是创建一个简单的化简器，其工作方式类似于setState()，但是将覆盖更改的项，而不是整个状态：

const reducer = (state, payload) => ({ ...state, ...payload });

export function List() {
  const [data, setData] = useReducer(reducer, { users: [], isFetching: false });

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        setData({ isFetching: true });
        const response = await axios.get(USER_SERVICE_URL);
        setData({ users: response.data, isFetching: false });
      } catch (e) {
        console.log(e);
        setData({ isFetching: false });
      }
    };
    fetchUsers();
  }, []);

  console.log(data)

useEffect中缺少或未使用的依赖项数组

1 个答案: