Question

我有一个愚蠢的问题。我正在尝试学习一些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：？

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

感谢您的帮助。

Answer 1

您可以尝试使用Array.prototype.find()。 >>> 'gtagtadogcat'.replace('gta'+'dog', 'cat'+'dog') 'gtacatdogcat'返回与谓词匹配的数组中的第一个元素；如果未找到任何内容，则返回find()。这可以帮助避免需要使用undefined或类似方法访问数组元素。

[0]

希望有帮助！

从道具访问已过滤的对象值（JS / React）

1 个答案: