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 | <div> > 6 | {product.reviews.map( review => { 7 | return (<ProductReview review={review} key={review.id} />) 8 | })} 9 | </div>
が表示されます。
/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 = () => ( <BrowserRouter> <div> <Header /> <Route exact path = '/' component={ProductsIndexContainer} /> <Route path = '/products/:productId' component={ProductPageContainer} /> </div> </BrowserRouter> ) 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 ( <ProductPage product={this.state.product} /> ); } } export default ProductPageContainer;
↓ProductPage.js mapメソッドでエラーが出ます。
const ProductPage = ({ product }) => ( <div> {product.name} //表示される {product.reviews.map( review => { //TypeError: Cannot read property 'map' of undefined return (<ProductReview review={review} key={review.id} />) })} </div> ); 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 ( <div> {this.state.products.map( product => { return (<Product product={product} key={product.id} />) })} </div> ) } } export default ProductsIndexContainer;
どなたかご教授いただければ幸いです。よろしくお願いします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。