必須返回一個有效的React元素（或null）

嗨，我是相當新的反應和REDX，我創建了一個POC，並得到了這個錯誤，儘管我努力我無法解決這個這裏是我的代碼必須返回一個有效的React元素（或null）

SHOPING-應用程序/應用程序/ index.jsx

import React, { Component } from 'react' 
import ReactDOM from 'react-dom' 
import {createStore} from 'redux' 
import reducer from './reducers/index.js' 
import {Provider} from 'react-redux' 
let store = createStore(reducer) 
import App from './components/App' 

ReactDOM.render(
<Provider store={store}><App/></Provider>,document.getElementById('app'));

SHOPING-應用程序/應用/組件/ product.jsx

import React from 'react' 
let Product =({id,name,cost,handleClick})=>{ 
<div> 
{name} ${cost}<button onClick={()=>handleClick(id)}>Add to Cart</button> 
</div> 
} 

export default Product

SHOPING-應用程序/應用/組件/ App.jsx

import React, { Component } from 'react' 
import Products from '../containers/products.jsx' 
export default class App extends Component { 
render(){ 
return (
    <div> 
    <p>Welcome to our shop</p> 
    <Products/> 
    </div> 
) 
} 
}

SHOPING-應用程序/應用/組件/ products.jsx

import React from 'react' 
import Product from './product.jsx' 
let Products=({products,handleClick})=>(
<section> 
<h2>Our Products</h2> 
< section> 
{products.map(product=><Product 
         key={product.id} 
         {...product} 
         handleClick={handleClick}/>)} 
</section> 
</section> 
) 

export default Products

SHOPING-應用程序/應用程序/容器/ products.jsx

import React from 'react' 
import {connect} from 'react-redux' 
import Products from '../components/products.jsx' 

function mapStateToProps(state){ 
return{ 
products:state.products 
} 
} 
function mapDispatchToProps(dispatch){ 
return{ 
handleClick(id){ 
dispatch({ 
type:'ADD_TO_CART', 
payload:{ 
id 
} 
}) 

} 
} 
} 

let ProductsContainer =connect(mapStateToProps,mapDispatchToProps) (Products) 
export default ProductsContainer

SHOPING-應用程序/應用程序/減速/index.js

import {ADD_TO_CART,REMOVE_FROM_CART,CHANGE_CATEGORY} from '../constants/actionTypes' 

    let initialState={ 
    activeCategory:'food', 
    products:[ 
    {id:193,name:'pizza',cost:10}, 
    {id:194,name:'pizza2',cost:100}, 
    {id:195,name:'pizza3',cost:1000}, 
    {id:196,name:'pizza4',cost:10000}, 
    ], 
    shoppingCart:[] 
    } 

    export default function reducer(state=initialState,action){ 
    switch(action.Type){ 
     case CHANGE_CATEGORY: 
     return{ 
      ...state, 
      activeCategory:action.payload 
     } 
     case ADD_TO_CART: 
      return{ 
      ...state, 
      shoppingCart:[...state.shoppingCart,action.payload] 
      } 
      case REMOVE_FROM_CART: 
      return{ 
       ...state, 
       shoppingCart:state.shoppingCart.filter(productId=>productId!=action.payload) 
      } 
      default: 
       return state 
    } 
    }

來源

2017-09-24 Monis

'產品'組件不返回任何東西，在'{}'中添加返回值。 –

問題是這樣的：shoping-app/app/components/produc t.jsx

這只是引用一個反應組件的默認導出函數，但它不返回任何東西。爲了返回，您必須顯式鍵入return關鍵字，或者只需將對象（本例中爲組件）包裝在括號（）中。

import React from 'react' 
let Product =({id,name,cost,handleClick})=> ({ 
<div> 
{name} ${cost}<button onClick={()=>handleClick(id)}>Add to Cart</button> 
</div> 
}) 

export default Product

來源

2017-09-24 19:37:04 Burimi

首先在代碼中更改此錯誤。

ReactDOM.render(
<Provider store={store}><App/></Provider>,document.getElementById('app'));

到

const elem =() => <Provider store={store}> <App/> </Provider>; 

ReactDOM.render(elem, document.getElementById('app'));

之後更改product.jsx裏面的花括號圓括號像這樣。

let Product =({id,name,cost,handleClick}) => ( 
    // 
    // 
)

這樣一來，你會從Product將返回一個有效的JSX。通過將它放在大括號中，您只需啓動函數定義但不返回任何內容。

來源

2017-09-24 19:37:45

必須返回一個有效的React元素（或null）

回答

相關問題