Javascript ReactJs无法读取属性'；道具'；未定义的

我有像这样的最内部子组件的代码

import React from 'react'
import { addToCart } from 'actions/cart'


export default (props) => {
  const { line_item, cart} = props
  // const oClick = line_item.oClick.bind(line_item)
const handleClick = (id) =>   this.props.dispatch(addToCart(id, 1))
 // *I am getting error above line*
  return (
  <div>
  <ul className="ul-reset">
    <li>
      <div className="cart-prod-wrapper cf">
        <div className="cart-image-wrapper">
          <div className="cart-image">
              <a href="#"><img src="#" alt="Product One"/>
              </a>
          </div>
        </div>
        <div className="cart-details">
          <div className="cart-name">
            <a href="#">{line_item.variant.name}</a>
          </div>
          <div className="cart-price">{line_item.variant.price}</div>
        </div>
        <div className="cart-qty">
          <div className="cart-qty-name">QTY:</div>
          <div className="cart-qty-value">
            <div class="minus"><span>-</span></div>
          {line_item.quantity}
          <div class="plus">
 <span value = { line_item.variant.id } onClick={handleClick(line_item.variant.id)}  >+</span></div>
          </div>
        </div>

        <div className="cart-total">
          <div className="cart-total-name">Total</div>
          <div className="cart-total-value">{line_item.variant.price * line_item.quantity}</div>
            </div>

          </div>
        </li>

      </ul>

    </div>
      )
    }

}

---

也许这会有帮助

import React from 'react'
import { connect } from 'react-redux' // import connect from redux
import { addToCart } from 'actions/cart'

// name component to wrap it with connect
const MyComponent = (props) => {
  const { line_item, cart} = props
  return (
  <div>
  <ul className="ul-reset">
    <li>
      <div className="cart-prod-wrapper cf">
        <div className="cart-image-wrapper">
          <div className="cart-image">
              <a href="#"><img src="#" alt="Product One"/>
              </a>
          </div>
        </div>
        <div className="cart-details">
          <div className="cart-name">
            <a href="#">{line_item.variant.name}</a>
          </div>
          <div className="cart-price">{line_item.variant.price}</div>
        </div>
        <div className="cart-qty">
          <div className="cart-qty-name">QTY:</div>
          <div className="cart-qty-value">
            <div class="minus"><span>-</span></div>
          {line_item.quantity}
          <div class="plus">
           // used arrow function 
            <span value = { line_item.variant.id } onClick={() => props.dispatch(addToCart(line_item.variant.id, 1)}  >+</span></div>
          </div>
        </div>

        <div className="cart-total">
          <div className="cart-total-name">Total</div>
          <div className="cart-total-value">{line_item.variant.price * line_item.quantity}</div>
            </div>

          </div>
        </li>
      </ul>
    </div>
      )
}

export default connect()(MyComponent); // connect dispatch to component

从“React”导入React
从'react redux'导入{connect}//从redux导入connect
从“操作/购物车”导入{addToCart}
//命名要用connect包装的组件
常量MyComponent=（道具）=>{
const{line_item，cart}=props
返回(


{line_item.variant.price}
数量：
-
{line_item.quantity}
//使用箭头函数
props.dispatch（addToCart（line_item.variant.id，1）}>+
全部的
{line_item.variant.price*line_item.quantity}


)
}
导出默认连接（）（MyComponent）；//连接到组件

这可能会有所帮助

import React from 'react'
import { connect } from 'react-redux' // import connect from redux
import { addToCart } from 'actions/cart'

// name component to wrap it with connect
const MyComponent = (props) => {
  const { line_item, cart} = props
  return (
  <div>
  <ul className="ul-reset">
    <li>
      <div className="cart-prod-wrapper cf">
        <div className="cart-image-wrapper">
          <div className="cart-image">
              <a href="#"><img src="#" alt="Product One"/>
              </a>
          </div>
        </div>
        <div className="cart-details">
          <div className="cart-name">
            <a href="#">{line_item.variant.name}</a>
          </div>
          <div className="cart-price">{line_item.variant.price}</div>
        </div>
        <div className="cart-qty">
          <div className="cart-qty-name">QTY:</div>
          <div className="cart-qty-value">
            <div class="minus"><span>-</span></div>
          {line_item.quantity}
          <div class="plus">
           // used arrow function 
            <span value = { line_item.variant.id } onClick={() => props.dispatch(addToCart(line_item.variant.id, 1)}  >+</span></div>
          </div>
        </div>

        <div className="cart-total">
          <div className="cart-total-name">Total</div>
          <div className="cart-total-value">{line_item.variant.price * line_item.quantity}</div>
            </div>

          </div>
        </li>
      </ul>
    </div>
      )
}

export default connect()(MyComponent); // connect dispatch to component

从“React”导入React
从'react redux'导入{connect}//从redux导入connect
从“操作/购物车”导入{addToCart}
//命名要用connect包装的组件
常量MyComponent=（道具）=>{
const{line_item，cart}=props
返回(


{line_item.variant.price}
数量：
-
{line_item.quantity}
//使用箭头函数
props.dispatch（addToCart（line_item.variant.id，1）}>+
全部的
{line_item.variant.price*line_item.quantity}


)
}
导出默认连接（）（MyComponent）；//连接到组件

摆脱

这个

，你在一个无状态的组件中：

props.dispatch

@AndrewLi error-TypeError:props.dispatch不是一个函数，如果删除它。你是否将dispatch映射到props？除此之外，请注意你正在执行

handleClick

，而不是将它作为

onClick

上的参数传递@AndrewLi是的，已经删除了

这个

，您处于一个无状态组件中：

props.dispatch

@AndrewLi error TypeError:props.dispatch不是一个函数，如果删除它。您是否将dispatch映射到props？除此之外，请注意您正在执行

handleClick

，而不是在e

onClick

@AndrewLi yes that have done是父组件中的演示组件我已经使用“connect”我仍然需要使用它，为什么？？？实际上，您需要连接任何需要与存储交互的组件。在本例中，您正在调度addToCart操作。如果这是表示组件，并且您不想将此组件连接到存储，则必须将方法从连接的父组件传递给此组件，并且不要他要求在父组件中执行分派操作：）。它是父组件中的演示组件，我已使用“连接”我仍然需要使用它，为什么？？？实际上，您需要连接任何需要与存储交互的组件。在本例中，您正在调度addToCart操作。如果这是表示组件，并且您不想将此组件连接到存储，则必须将方法从连接的父组件传递给此组件，并且不要他要求在父组件中执行分派操作：）。

export default connect(mapStateToProps)(HeaderContainer)

import React from 'react'
import { connect } from 'react-redux' // import connect from redux
import { addToCart } from 'actions/cart'

// name component to wrap it with connect
const MyComponent = (props) => {
  const { line_item, cart} = props
  return (
  <div>
  <ul className="ul-reset">
    <li>
      <div className="cart-prod-wrapper cf">
        <div className="cart-image-wrapper">
          <div className="cart-image">
              <a href="#"><img src="#" alt="Product One"/>
              </a>
          </div>
        </div>
        <div className="cart-details">
          <div className="cart-name">
            <a href="#">{line_item.variant.name}</a>
          </div>
          <div className="cart-price">{line_item.variant.price}</div>
        </div>
        <div className="cart-qty">
          <div className="cart-qty-name">QTY:</div>
          <div className="cart-qty-value">
            <div class="minus"><span>-</span></div>
          {line_item.quantity}
          <div class="plus">
           // used arrow function 
            <span value = { line_item.variant.id } onClick={() => props.dispatch(addToCart(line_item.variant.id, 1)}  >+</span></div>
          </div>
        </div>

        <div className="cart-total">
          <div className="cart-total-name">Total</div>
          <div className="cart-total-value">{line_item.variant.price * line_item.quantity}</div>
            </div>

          </div>
        </li>
      </ul>
    </div>
      )
}

export default connect()(MyComponent); // connect dispatch to component