reactjs 无法使用 map 方法在我的 jsx 中显示数据

Question

您好，我正在使用 redux，但无法使用 map 方法在我的 jsx 中显示数据。 收到此错误Cannot read properties of undefined (reading 'data')另见 screenshot2 我可以看到我的数据是从 api 接收的。如果我的数据正在接收，那么为什么会出现此错误？

const PostAds = () => {
  const dispatch = useDispatch()
  const [category,setCategory] = useState([])
  useEffect(()=>{
    const fetchcategory = async ()=>{
    const data = await axios.get("http://127.0.0.1:8000/ads_category/")
    const r = dispatch(ads_category(data)) 
    setCategory(r)
    } 
    fetchcategory()

  },[])

  useEffect(() => {
   
     console.log("redux_data",category)
  }, [category]);

  
    return (
      <>
       {category.payload.data.map((data)=>{
        return(data.main_category)
       })}
     </>
     
  )
}

export default PostAds

二次截图

截图1

Answer 1

与您的类型保持一致。

根据屏幕截图中的数据，您希望category为 object 并具有名为payload的属性。 但是您最初将category设置为空数组：

const [category,setCategory] = useState([])

那么它应该是一个 object 还是一个数组？ 数组永远不会有一个名为payload的属性。

首先，如果您不希望它成为数组，请不要将其设置为数组。 如果你根本不给它初始值，它将是undefined ：

const [category,setCategory] = useState()

然后在 JSX 中，在引用它时使用可选链接，这样如果它undefined ，它就不会输出任何内容：

<>
  {category?.payload.data.map((data)=>{
    return(data.main_category)
  })}
</>

如果在某些情况下可能未定义payload属性或任何其他属性，您可以使用相同的方法。

Answer 2

首先，在这种情况下， category是一个简单的 state 变量，不需要对 redux 做任何事情。您必须使用存储在 redux 中的 state，而不是组件本身。 就此而言， dispatch(ads_category(data))就足够了。

其次，您的useEffect在第一次渲染后被调用，这意味着您仅在组件已经尝试渲染一次后才将数据提取到category中。 所以category.payload.data.map显然会出错，因为category没有你想要的值。

由于这是一个基本问题，请尝试了解您收到此错误的原因，以免将来重复出现。

要立即解决，请尝试使用以下方法：

{category?.payload?.data?.map((data)=>{
    return(data.main_category)
})}