开发者问题收集

如何使用 useEffect 在页面启动时使用 user_id 加载列表

2020-09-06
212
reactjs use-effect use-state

我一直尝试根据从父页面获取的 user_id 在页面上加载列表，但是我一直收到 React Hook useEffect 缺少依赖项：“newuser_id”。要么包含它，要么删除依赖项数组 react-hooks/exhaustive-deps 警告，然后出现错误，说 Uncaught TypeError: Cannot read property 'length' of undefined 现在它甚至不再读取 useEffect..

这是我的文件： 

import React, {useEffect, useState} from 'react';
import { authenticationService } from '../../services/authentication.service';

export default function Kilometer({user_id}) {
  const [kmListe, setKmListe] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(false);
  
  console.log('root ' + user_id);

  useEffect(() => {
    console.log('useEffect' + user_id)
    setIsLoading(true)
    if(!user_id){
      setKmListe('')
      console.log('!user_id ' + kmListe)
    }else{
      const getData = async () => {
      await authenticationService.kmliste(user_id)
      .then(
        km => {
          console.log('test 1 '+JSON.stringify(km))
          setKmListe(JSON.stringify(km))
          setIsLoading(false)
        }
      ).catch(err => {
        console.log('catch ' + err)
        setError(true)
        setIsLoading(false)
      })};
    getData()
    }
    
  }, [kmListe])
  const liste = 
  setIsLoading(true)
    if(kmListe === ''){
      console.log('blank '+kmListe)
      return ['No list','add km to make a list'];
    }else{
    kmListe.map(listen =>{
      console.log('map ' + listen)
    return(
        <div key={listen.id}>                    
                <div>
                    <h1>{listen.km_start} {listen.km_slut}</h1>
                    <h2>{listen.start_by} {listen.slut_by}</h2>  
                </div>
        </div>
    )
})}
console.log('return '+liste)
     return error ? 
<h1>{error}</h1> :
         isLoading ? 
        <h1>LOADING.......</h1> :
         liste.length ? <h1>{error}</h1> : (
            <div>
              {liste}
    </div>
        );
    
}

我已将 console.logs 保留在代码中，以便您可以从控制台上的输出中看到运行的内容

root 2

return undefined

root 2

return undefined

编辑 现在无论我做什么 useEffect 都不会触发，我卡住了，我不知道如何解决它。 我尝试删除 newuser_id 并尝试创建一个新页面但结果相同..

2个回答

此组件中有几个问题。

  • useEffect 必须接受没有参数的函数。类似于 () => { /* effect*/ }。通过传递 newuser_id ，它会遮盖代码中先前声明的变量。因此，将其从参数中删除并将其传递到依赖项数组中。顺便问一句，你为什么要声明 newuser_id 而不是直接使用 user_id ？
  • setKmListe 安排更新。 kmListe 不会立即更新。
Rodrigo Amaral
2020-09-06

警告中提到了钩子依赖项。不确定这是否能解决您的所有问题，但我觉得这是一个好的开始。

依赖项被定义为 useEffect 钩子的第二个参数。

示例： 

useEffect(() => {
  const fetchUser = async () => {
    const response = await fetch(`http://something.com/users/%{userId}`);
    const user = await response.json();
    setUser(user);
  };
  if (userId) fetchUser();
}, [userId])

请注意， userId 是 useEffect 钩子依赖项的一部分。

一般规则是不要对依赖项撒谎。意味着如果某些东西在 useEffect 之外定义，但在内部使用，则它应该是依赖项的一部分。

阅读更多内容 这里

此外， kmListe 是一个钩子依赖项，是一个无限循环等待发生，因为您重新定义了钩子内部的状态。每次状态改变时，由于它是依赖项的一部分，效果都会在每次渲染时再次运行。

reobin
2020-09-10