Question

未捕获的类型错误：无法读取未定义的属性（读取‘过滤器’）JavaScript

2022-07-13

4787

javascript reactjs filter axios use-effect

我担心 JavaScript 中的过滤器无法工作。我不确定可能是因为 API 响应时间太长

我的代码：

const getDataAll  = () =>{
    const [machines, setMachines] = useState([])
    const getMc = async () =>{
       try {
         const resMc = await axios.get("My API")
         setMachines(resMc.data)
       } catch (err) {
         console.error(err.message)
       }

    useEffect(()=>{
       getMc()
    },[])
    
    const sumData = () =>{
       const filterName = machines.data.filter((el) => el.name == "v10turbo")
    }
}

过滤器会在一段时间内显示此警报。

我看到浏览器中显示的 API 响应时间大约为 8-9 秒，请按照下面的图片操作

我不确定我是否做对了。如果正确，请帮助我解决这个问题

Answer 1

代码本身是正确的。但是当您的组件渲染时，还没有数据，useeffect 在重新渲染后起作用。您需要一个加载状态：

const getDataAll  = () =>{
        const [machines, setMachines] = useState([]);
        const [loading, setLoading] = useState(true);
        const getMc = async () =>{
           try {
             const resMc = await axios.get("My API")
             setMachines(resMc.data)
             setLoading(false);
           } catch (err) {
             console.error(err.message)
           }
        finally {
        setLoading(false);
        }
    
    }
    
        useEffect(()=>{
           getMc()
        },[])
        
        const sumData = () =>{
           const filterName = machines.data.filter((el) => item.name == "v10turbo")
        }
    }
    if(loading) {
     return<p>Loading...</p>
}

这应该可以解决问题。

Answer 2

我不确定，但这可能会有帮助

const sumData = useCallback(() =>{
   const filterName = machines.data?.filter((el) => item.name == "v10turbo")
}, [machines]);