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

Question

I have a problem concern filter in JavaScript can't working. I'm not sure may because API using long time for response

My code :

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")
    }
}

Filter have show this alert in some time.

And i see time show in browser for API response around 8-9 second follow image below

I'm not sure if I got it right. if right please help me with to solve this problem

Answer 1

The code itself is correct. But when your component renders, there is no data yet, useeffect works after rerender. You need a loading state:

 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> }

This should fix it.

Answer 2

I not sure, but this can be helpful

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