首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用redux时,无法读取react js中未定义的属性(读取'map')

使用redux时,无法读取react js中未定义的属性(读取'map')
EN

Stack Overflow用户
提问于 2021-11-11 20:30:11
回答 1查看 64关注 0票数 0

我的后台工作得很好,甚至我的redux与react js的集成也工作得很好,但是一旦我使用useEffect,它就会给出一个错误“无法读取未定义的属性”。

下面是我的代码:

代码语言:javascript
运行
复制
const ProductListScreen = ({ match }) => {
  const dispatch = useDispatch()

  const shopDetails = useSelector((state) => state.shopDetails)
  const { loading, error, shop } = shopDetails

  useEffect(() => {
    dispatch(shopDetail(match.params.shopid))
  }, [dispatch, match])

  if (loading) {
    return (
      <div className='loader'>
        <Loader />
      </div>
    )
  }

  return (
    <>
      <Link className='btn btn-dark my-3' to='/'>
        Go Back
      </Link>
      <h3>{shop.name} Products</h3>
      {error ? (
        <Message variant='warning' color='red'>
          {error}
        </Message>
      ) : (
        <Row>
          {shop &&
            shop.products.map((product) => (
              <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
                <Product product={product} shopId={shop._id} />
              </Col>
            ))}
        </Row>
      )}
    </>
  )
}
EN

回答 1

Stack Overflow用户

发布于 2021-11-11 21:03:54

代码语言:javascript
运行
复制
 <Row>
      {shop &&
        shop.products?.map((product) => (
          <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
            <Product product={product} shopId={shop._id} />
          </Col>
        ))}
    </Row>

使用optional chaining operator跳过未定义产品的映射

非常确定,它是真实的,所以条件是真实的,但在映射时,您仍然没有检查产品的真实性

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69934547

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档