Rails(APIモード)からJSON APIをaxiosで取得して, Reactで表示しようとしています。 React Routerを使っているのですが、Productの個別ページのみ、mapメソッドで ``` TypeError: Cannot read property 'map' of undefined ProductPage src/components/ProductPage.js:6 3 | 4 | const ProductPage = ({ product }) => ( 5 |

> 6 | {product.reviews.map( review => { 7 | return () 8 | })} 9 |

``` が表示されます。 /api/v1/products/123 での表示例は以下です。(エラーの出る箇所で console.log()で呼び出すと、console上では問題なく表示されています。) ``` { "id": 123, "name": "XXXXXXXXXXXXXX", -----------省略-------------------- "reviews": [ { "id": 426, "title": "XXXXXXXXXXXXXXXXXXXXX", ----------省略--------------------- }, { "id": 475, "title": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", ----------省略--------------------- }, -------------省略----------------- ]} ``` 以下がコードです。 import部分は省略しています。 ↓App.js ``` const App = () => (

) export default App; ``` ↓ProductPageContainer.js ``` class ProductPageContainer extends Component { constructor(props){ super(props) this.state = { product: [] } } componentDidMount() { const { match: { params } } = this.props; axios.get(`/api/v1/products/${params.productId}.json`) .then(response => { console.log(response) this.setState({ product: response.data }) }) .catch(error => console.log(error)) } render() { return ( ); } } export default ProductPageContainer; ``` ↓ProductPage.js mapメソッドでエラーが出ます。 ``` const ProductPage = ({ product }) => (

{product.name} //表示される {product.reviews.map( review => { //TypeError: Cannot read property 'map' of undefined return () })}

); export default ProductPage; ``` ↓ProductsIndexContainer.js 一応載せておきます。さらに下層のページではproduct.reviews.map は問題なく動いています。 ``` class ProductsIndexContainer extends Component { constructor(){ super() this.state = { products: [] } } componentDidMount() { axios.get('/api/v1/products.json') .then(response => { console.log(response) this.setState({ products: response.data }) }) .catch(error => console.log(error)) } render() { return (

{this.state.products.map( product => { return () })}

) } } export default ProductsIndexContainer; ``` どなたかご教授いただければ幸いです。よろしくお願いします。

	@@ -1,1 +1,1 @@
1	- ReactでJSON APIの配列~~をmapしようとすると,typeError: Cannot read property 'map' of undefinedが出る~~。
1	+ ReactでJSON APIの配列要素にアクセスできない。

質問編集履歴