未捕获的类型错误：无法读取未定义（读取“过滤器”）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在重新渲染后起作用。 你需要一个加载状态：

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