如何传递编辑属于状态的对象并返回该编辑对象?

时间:2017-06-07 20:32:42

标签: javascript reactjs redux lodash

我有一个像这样的obj:

Object{}

此对象内部有其他对象,但是用键标记,如下所示:

Object{1: Object, 2: Object, 3: Object}

我希望能够选择其中一个对象或仅通过键的值进行编辑。所以说对象1是一个具有

的对象
1: Object {
   title: "yay Im a title",
   description: "yay Im a desc",
   quantity: 1
   }

我希望能够获得像1这样的值,并且能够使用1 out的键获取该特定对象,并在每次调用函数或其他任何内容时将数量更新为1。如果这没有,请告诉我。

这是我在react / redux中使用的项目。

我将发布每个相关代码:

动作:

 export function updateCart(_id, unit) {
  return {
    type: "UPDATE_CART",
    _id: _id,
    unit: unit
  }
}

减速器:

case "UPDATE_CART":
    let foundBook = _.get(state, action._id);
    //Stuck here, want to update quantity by one and return the item
    break;

调用操作的组件:

import React , { Component } from 'react';
import {connect} from 'react-redux';
import {addToCart, updateCart} from '../../actions/cartActions';

class BookItem extends Component {

  handleCart() {
    const book = {
      _id: this.props._id,
      title: this.props.title,
      description: this.props.description,
      price: this.props.price,
      quantity: 1
    }
    if(Object.keys(this.props.cart).length > 0) {
      let _id = this.props._id;

      let cartIndex = _id in this.props.cart;
      if(!cartIndex) {
        this.props.addToCart(book);
      } else {
        this.props.updateCart(_id, 1);
      }

    } else {
      this.props.addToCart(book);
    }
  }

  render() {
    return (
      <div className="well">
        <div className="row">
          <div className="col-xs-12">
            <h6>{this.props.title}</h6>
            <p>{this.props.description}</p>
            <h6>{this.props.price}</h6>
            <button onClick={this.handleCart.bind(this)} className="btn btn-primary">Buy now</button>
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
 return {
   cart: state.cart
 }
}

export default connect(mapStateToProps, {addToCart, updateCart})(BookItem);

希望现在这并不会让人感到困惑,但是根据要求,我发布了我正在努力的内容,希望有所帮助。

1 个答案:

答案 0 :(得分:0)

一种非常基本的方法可能是创建一个将对象,键和可选函数作为参数的函数。如果提供了一个函数作为第三个参数,则将使用给定的键(如果找到)对子对象进行求值。将返回子对象(如果找到)。

使用hasOwnProperty可以单独定位属于父对象的子对象,而不是从原型继承。

function extract(obj, key,fn) {
    if (obj === null || typeof obj !== 'object' || 
        key === null || !obj.hasOwnProperty(key) || typeof obj[key] !== 'object' || 
        obj[key] === null) 
        return null;

    if (typeof fn === 'function' && fn !== null) 
        fn(obj[key]);

    return obj[key];
}