必须返回一个有效的 React 元素（或 null），但不是答案

【问题标题】：A valid React element (or null) must be returned but not必须返回一个有效的 React 元素（或 null），但不是
【发布时间】：2017-09-24 19:24:38
【问题描述】：

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

shoping-app/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'));

shoping-app/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

shoping-app/app/components/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-app/app/components/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
    }
    }

【问题讨论】：

Product 组件没有返回任何内容，请在 {} 中添加返回。

标签： javascript reactjs ecmascript-6 redux react-redux

【解决方案1】：

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

this 默认导出的函数只是引用了一个 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

【讨论】：

【解决方案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}) => (  
   // 
   //
)

这样，您将从Product 返回一个有效的jsx。通过将它括在花括号中，您只需启动函数定义但不返回任何内容。

【讨论】：