Javascript 必须返回有效的React元素（或null），但不能返回

嗨，我对react和redux很陌生，我在创建一个poc时遇到了这个错误，尽管我付出了努力，但还是无法解决这个问题 这是我的密码

购物应用程序/app/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'));

购物应用程序/app/reducers/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
    }
    }

---

问题在于：购物应用程序/app/components/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

此函数的默认导出函数仅引用react组件，但不返回任何内容。为了返回，您必须显式地键入return关键字，或者将对象（本例中的组件）括在括号（）中

从“React”导入React
让产品=（{id，name，cost，handleClick}）=>({
{name}${cost}handleClick（id）}>添加到购物车
})
导出默认产品

要开始，请在代码中更改此错误

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

---

这样，您将从

Product

返回一个有效的jsx。通过用大括号括起来，您只需启动函数定义，但不返回任何内容。

Product

组件没有返回任何内容，请在

{}

中添加返回内容。

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

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

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

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

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

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

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