Question

你好我很反应和redux，我正在创建一个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 / 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

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

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

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

2 个答案: