Uncaught TypeError: can't access property "map", sizes is undefined

Question

我正在尝试映射道具大小，当我从 api 加载项目时，我正在保存该状态，但我不断收到此错误： “未捕获类型错误：无法访问属性“地图”，尺寸未定义”

    const ItemDetailContainer = () => {
    const { id } = useParams()
    const [item, setItem] = useState({})
    const [related, setRelated] = useState([])
    const [sizes, setSizes] = useState([])
    const [loading, setLoading] = useState(true)

    const getRelated = () => {
        const relatedItems = (productList.filter(product => product.category === item.category))
        const clearRelated = relatedItems.filter(product => product.id !== item.id)
        setRelated(clearRelated)
    }

    const setsizing = () => {
        setSizes(item.sizes)
    }

    useEffect(() => {
        customFetch(3000, productList.find(product => product.id == id))
            .then(res => setItem(res))
            .catch(error => console.log(error))
            .finally(setLoading(false))
    }, [])

    //This is a solution to get the sizes and related items to load after the item has been loaded
    useEffect(() => {
        getRelated()
        setsizing()
        console.log(sizes);
    }, [item])



    return (
        <>
            loading ? <Spinner />
            :
            <ItemDetail
                name={item.name}
                price={item.price}
                img={item.img}
                stock={item.stock}
                category={item.category}
                description={item.description}
                sizes={sizes}
                related={related}
            />
        </>
    )
}

Answer 1

React hook的使用错误很少

1.您不应在设置状态后立即访问状态变量。因为价值根本不靠谱

        setsizing()
        console.log(sizes); // This sizes is not updated value in Reactjs.

2。你应该在你的钩子中提供正确的依赖关系，并且可以删除不必要的功能。

在下面的代码中，至少需要添加productList。

useEffect(() => {
        customFetch(3000, productList.find(product => product.id == id))
            .then(res => setItem(res))
            .catch(error => console.log(error))
            .finally(setLoading(false))
    }, [])

3。一行代码即可获取相关列表

这是您可以参考的更新代码片段。

const ItemDetailContainer = () => {
  const { id } = useParams()
  const [item, setItem] = useState({})
  const [related, setRelated] = useState([])
  const [sizes, setSizes] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    customFetch(3000, productList.find(product => product.id == id))
      .then(res => setItem(res))
      .catch(error => console.log(error))
      .finally(setLoading(false))
  }, [productList])

  //This is a solution to get the sizes and related items to load after the item has been loaded
  useEffect(() => {
    if (item && productList) {
      const related = (productList.filter(product => product.category === item.category && product.id !== item.id))
      setRelated(related);
      setSizes(item.sizes);
    }
  }, [item, productList]);

  return (
    <>
      loading ? <Spinner />
      :
      (item? <ItemDetail
        name={item.name}
        price={item.price}
        img={item.img}
        stock={item.stock}
        category={item.category}
        description={item.description}
        sizes={sizes}
        related={related}
      /> : <div>Item does not exist!</div>)
    </>
  )
}

Uncaught TypeError: can't access property "map", sizes is undefined

Uncaught TypeError: can't access property "map", sizes is undefined

reactjs

mapping