Question

我对这个内部最多子组件的js代码做出反应

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

我想执行使用调度来调用操作

和父表示组件的代码是行

export default (props) => {


const { account, cart, readMore1} = props

 return (

<li>

{ !cart.isFetching && cart.line_items.map( 
  (line_item, i) => <CartPreview key = {i} line_item= {line_item} cart ={cart}   />)  
} 

</li>
 )
 }

可以随时指导我解决此错误

修改

const mapStateToProps = (state) => {
return {
account: getAccount(state),
cart: getCart(state),
classToSend: getReadmore(state),
authenticityToken: getAuthenticityToken(state)
}

}

export default connect(mapStateToProps)(HeaderContainer)

Answer 1

可能会有所帮助

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

ReactJs无法读取属性＆＃39;道具＆＃39;未定义的

1 个答案: