时间戳

首页 > 解决方案 > 从 props (JS/React) 访问过滤后的对象值

javascript - 从 props (JS/React) 访问过滤后的对象值

问题描述

我有一个愚蠢的问题。我正在尝试学习一些 React 并遇到了问题。

我正在使用 mapStateToProps 从 OwnProps 返回与特定 ID 匹配的过滤对象。那部分工作正常。当我记录状态时，我可以看到返回了正确的项目。问题是我不确定如何访问它传递给的组件中的值。

这是我的代码：

const ProductModal = (props) => {
  return (
    <Modal 
        isOpen={props.isOpen}
        onRequestClose={props.handleCloseModal}
        contentLabel="Modal"
        className="modal"
    >
    <h3>Title</h3>
    <p>Item Name Here</p>
    <p>Item Style Here</p>
    <p>Item Sale Here</p>
    </Modal>
  )
}

const mapStateToProps = (state, props) => {  
  return {
    item: state.filter((item) => {
      return item.id === props.selectedItem
    })
  }
}
const connectedOptionModal = connect(mapStateToProps)(OptionModal);


export default connectedOptionModal;

当我在组件中记录道具时，我看到了这些项目，但不确定如何实际访问这些值。

当我检查 Chrome 控制台时，我看到的是：

item: Array(1)
  0: {
      id: 123456,
      name: t-shirts, 
      style: graphic, 
      sale: false
      }

也许有一种方法可以返回“扁平”状态以消除0:？

抱歉，如果这是一个愚蠢的问题。

谢谢你的帮助。

标签： javascriptreactjsobject

解决方案

您可以尝试使用Array.prototype.find()。find()返回与谓词匹配的数组中的第一个元素，或者undefined如果没有找到。[0]这可以帮助避免需要使用或类似方法访问数组元素。

const ProductModal = (props) => {
  return (
    <Modal 
        isOpen={props.isOpen}
        onRequestClose={props.handleCloseModal}
        contentLabel="Modal"
        className="modal"
    >
    <h3>Title</h3>
    {props.item &&
      (
        <div>{props.item.name} {props.item.style} {props.item.sale.toString()}</div>
      )
    }
    </Modal>
  )
}

const mapStateToProps = (state, props) => {  
  return {
    item: state.find((item) => {
      return item.id === props.selectedItem
    })
  }
}
const connectedOptionModal = connect(mapStateToProps)(OptionModal);

export default connectedOptionModal;

希望这会有所帮助！

推荐阅读