javascript - 必须返回有效的 React 元素(或 null)，但不返回

Question

嗨，我对 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'));

购物应用程序/应用程序/组件/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

购物应用程序/应用程序/组件/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>
)
}
}

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

Answer 1

问题是这样的:shoping-app/app/components/product.jsx

此函数的默认导出函数仅引用 React 组件，但不会返回任何内容。为了返回，您必须显式键入 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