JSXの内部で使用すると、オブジェクトデータがブラウザに表示されないのはなぜですか？

Question

私はReduxストアに接続されているReact Containerを持っています。 My Redux Storeには、mapStateToPropsで消費するデータの配列があります。しかし、私はJSXの中でそれを使うことができません。エラーはありません。ただし、ブラウザには何も表示されません。オブジェクトをコンソールに記録するとプロパティが得られます。

import React from 'react'; 
import {connect} from 'react-redux'; 

class CurrentStore extends React.Component { 
    render() { 
    console.log(this.props.current); 
    return (
     <div className='centered row'> 
     <div className='column'> 
      {this.props.current.name} 
     </div> 
     </div> 
    ); 
    } 
} 

function mapStateToProps (state, ownProps) { 
    return { 
    current: state.app.stores.filter(s => s._id === ownProps.match.params.storeId) 
    } 
} 

export default connect(mapStateToProps)(CurrentStore); 

Answer 1

Array.prototype.filterは、あなたのcurrentオブジェクトは、実際にはオブジェクトの配列であることを意味し、バック値の配列を与えます。

class CurrentStore extends React.Component { 
    render() { 
    console.log(this.props.current); 
    return (
     <div className='centered row'> 
      { this.props.current && this.props.current.map(item => <div className='column'>{ item.name }</div>} 
     </div> 
    ); 
    } 
} 

（より適切なたくさん見えた）

function mapStateToProps (state, ownProps) { 
    return { 
    current: state.app.stores.filter(s => s._id === ownProps.match.params.storeId)[0] 
    } 
} 

、またはあなたがレンダリング機能でそれを行う必要があります。

だからどちらか、あなたは次のように、最初の値を返すために、あなたのmapStateToPropsを変更する必要があります

レンダリングの中で1つ以上のアイテムが返される可能性があります。必要がない場合は、最初のアイテムのみを取るようにレンダリングを変更することが可能です

class CurrentStore extends React.Component { 
    render() { 
    let { current } = this.props; 
    if (!current || !current[0]) { 
     return null; 
    } 
    return (
     <div className='centered row'> 
      <div className='column'>{ current[0].name }</div> 
     </div> 
    ); 
    } 
}