未定义TypeError:无法读取未定义(读取‘过滤器’) JavaScript的属性

Question

我在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会在rerender之后工作。您需要一个加载状态：

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]);