标签: use-effect

目前，我只是在 useEffect 挂钩内调用它，而不将其作为依赖项，因为我只希望它运行一次。然而，这给出了React Hook useEffect has a missing dependency: 'dispatch'.我应该向依赖项添加调度还是有更好的实践？

  useEffect(() => {
    dispatch(handleGetUser());
  }, []);

我很困惑为什么该标志在初始状态下isLoading设置为true 。不是说一开始就应该是假的吗？考虑这个简单的例子：

const SearchCharity = () => {
  const [isLoading, setIsLoading] = useState(true)
  const [themes, setThemes] = useState([])

  useEffect(() => {
    const fetchThemes = async () => {
      try {
        setIsLoading(true)

        const result = await axios.get(url)
        setThemes(result.data.themes.theme)

        setIsLoading(false)
      } catch (err) {
        console.log(err)
      }
    }
    fetchThemes()
  }, [])

  return (
      {
        isLoading ? <h1>Loading......</h1> : <h1>Display Content</h1>
      }
    )

export default SearchCharity

另一件事是，如果我们在上面的代码中将其设置为true或，则仍然运行相同，屏幕上的结果也将相同。所以为什么？这是某种标准吗？falseuseEffecttrue

我正在尝试设置变量“工作区”的状态，但是当我控制台记录数据时，我得到了无限循环。我在 useEffect() 内部调用 axios“get”函数，并在此循环外部调用控制台日志记录，所以我不知道是什么触发了所有重新渲染。我在这个问题中没有找到我的具体问题的答案。这是我的代码：

function WorkspaceDynamic({ match }) {
  const [proposals, setProposals] = useState([{}]);
  useEffect(() => {
    getItems();
  });

  const getItems = async () => {
    const proposalsList = await axios.get(
      "http://localhost:5000/api/proposals"
    );
    setProposals(proposalsList.data);
  };

  const [workspace, setWorkspace] = useState({});
  function findWorkspace() {
    proposals.map((workspace) => {
      if (workspace._id === match.params.id) {
        setWorkspace(workspace);
      }
    });
  }

有谁看到可能导致重新渲染的原因吗？谢谢！

我试图在每次 URL 的查询参数更改时触发 useEffect，这是 URL 的格式：

https://localhost:3000/main/persons?results=1

在我的代码中，我有以下内容：

const location = useLocation();

useEffect(() => {
      console.log('Location update')
    }, [location]);

但是，我的问题是 useEffect 仅在 location.pathname 更改时运行，而不是在 URL 的查询参数更改时运行 (?results=1)。我还尝试了以下逻辑：[location.pathname, location.search] 但没有运气。

有谁知道我该如何解决这个问题？

如果我们传递空数组作为依赖项，我们可以使用useEffect一次调用函数，但也可以只调用函数而不使用钩子，只需调用它即可。

我尝试搜索仅针对第一次渲染调用函数的更好方法，但我只能找到建议与useEffect空数组一起使用的帖子。但为什么？是不是比较传统？

更好的方法是什么？为什么？

• 编辑）我想我提出了一些错误的问题。首先对此感到抱歉。我的问题更像是这样。

我们可以在主体中调用函数，以便可以用于每个渲染。我知道如果我们不建议第二个参数依赖项，那么它将在每个作品上调用渲染。但是使用“useEffect”有什么好处呢？我们可以通过调用useEffect和body来实现相同的目标。

我可以看到包含用户数组的响应对象，但似乎 setState 在钩子内不起作用useEffect()。

这是请求代码。

     const [users,setUsers] = useState([]);
     const getUsers=async()=>{
         await axios.get(API_URL,{
             headers:{
                 'Content-Type': 'application/json',
                     'Accept': 'application/json',
                     'Access-Control-Allow-Origin': '*'
             }
         })
         .then((res)=>{
            const data = res.data.users;
             console.log(data);
            setUsers([...users,data]);
            console.log(users);
            
         })
         .catch((err)=>{
             console.log(err);
         })
     }
     useEffect(()=>{
         
         getUsers();
     },[])

我有这个警告：

React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

用这个代码：

import { useDispatch } from 'react-redux';
import openSocket from "socket.io-client";
import {populateCustomers} from './slices/CustomerSlice';
const ENDPOINT = config.ENDPOINT; //socket address

function App() {
  const dispatch = useDispatch();
  useEffect(() => {
    const socket = openSocket(ENDPOINT);
    //hydrate
    socket.on("hydrateCustomers",data=>dispatch(populateCustomers(data)))

  },[]);

这个想法是，套接字打开一次，并且在服务器发生事件时 - 数据从响应分派到 redux 存储中。

我很确定我想要一个空的依赖项数组，因为我只想运行一次......有没有更好的方法来处理这种情况？或者我应该忽略这个警告？

我正在尝试渲染必须通过的数据useMemo。我从 api 调用获取数据，因此我调用useEffect. 初始渲染工作返回一个空数组，但是一旦我调用 api，数据就不会更新。

import React from 'react'
import {fetchAccounts} from '../utils/api'

export default function Accounts() {
    const [accounts, setAccounts] = React.useState([])

React.useEffect(() => {
    setLoading(true)
    fetchAccounts().then((data) => {
        setAccounts(data)
    })
}, [])
const data = React.useMemo(() => accounts, [])

return <p>{JSON.stringify(data)}</p>}

那么这可以在单个组件中工作吗？或者必须创建自定义挂钩？

我正在制作一个 React 仪表板，每分钟都会调用 API 进行更新。根据SO中的许多答案，我现在有这样的作品：

const Dashboard = (props) => {
  const [stockData, setStockData] = useState([]);

  useEffect(() => {
    //running the api call on first render/refresh 
    getAPIData();
    //running the api call every one minute
    const interval = setInterval(() => {
     getAPIData()
    }, 60000);
    return () => clearInterval(interval);
  }, []);
  
  //the api data call
  const getAPIData = async () => {
    try {
      const stdata = await DataService.getStockData();
      setStockData(stdata);
    }
    catch (err) {
      console.log(err);
    }
  };

但是我不断收到浏览器警告

React Hook useEffect has …

我有以下一组运行代码：

useEffect(() => {
 if (field[1].isActive === true) {
  handleMore();
 }
}, [field[1].text]);

问题是有时Fieldjson 响应中没有出现，因此此代码会显示错误。由于我无法将 useEffect 放入某些条件语句中（根据 React 指南，所有 useEffects 应始终以相同的顺序运行），有什么方法可以在依赖项中添加一些代码，例如[field.length? field[1].text: null]. 我不知道。

有人可以帮忙吗？