有効なReact要素（またはnull）は返されなければなりません

Question

こんにちは私は反応と還元のために新しく、私はpocを作成していましたが、私の努力にもかかわらずこのエラーがありました。これを解決できません ここですコード

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 
    } 
    } 

Answer 1

問題は次のとおりです。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 

Answer 2

まず、このエラーをコードで変更してください。

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}) => ( 
    // 
    // 
) 

このようにして、有効なjsxがProductから返されます。中括弧で囲むことで、関数定義を開始するだけで何も返しません。