Question

我一直在努力从我从父页面获得的user_id加载页面列表，但是我一直得到 React Hook useEffect缺少依赖项：'newuser_id'。要么包含它，要么删除依赖项数组react-hooks / exhaustive-deps 警告，然后显示一条错误消息，提示 Uncaught TypeError：无法读取未定义的属性'length'，现在它甚至不读取不再使用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保留在代码中，以便您可以从控制台上的输出中看到运行的情况

根2

返回未定义

根2

返回未定义

编辑现在，无论我做什么，Effect都不会触发，我卡住了，而且我不知道该如何克服它。我尝试删除newuser_id，并尝试制作一个新页面，但结果相同。

Answer 1

此组件中的几个问题。

useEffect必须接受不带参数的函数。类似于() => { /* effect*/ }。通过传递newuser_id，它使代码前面声明的变量黯然失色。因此，将其从参数中删除并将其传递到依赖项数组中。顺便说一句，为什么您甚至声明newuser_id而不是直接使用user_id？
setKmListe安排更新。 kmListe不会立即更新。

Answer 2

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

依赖关系定义为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之外定义，但在内部使用，则它应该是依赖项的一部分。

了解更多here

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

如何使用useEffect

2 个答案: