将映射子传递数据传递给新组件

Question

我有一个购物目录，我想从孩子那里获取数据并传递给一个新的组件。我已经从JSON映射数据（后来成为api调用），我想从映射的子组件中获取一些道具，即名称，价格和计数（它是组件的一部分，而不是原始数据）

data（name / price） - > mainComponent - >映射到childComponent（有计数） - > mainComponent

我应该使用表格吗？一些生命周期方法？终极版？路由器？不太确定如何解决这个问题。

数据

const marketData = [
    {
        id: 1,
        name: "product1",
        price: "$2",
    },
    {
        id: 2,
        name: "product2",
        price: "$3",
    },
    {
        id: 2,
        name: "product3",
        price: "$3",
    }
]

亲

import React, { Component } from 'react';
import MarketItem from './MarketItem.js'
import MarketData from './MarketData.js'


class MarketContainer extends Component {
  constructor() {
    super()
    this.state = {
      market: MarketData
    }
  }

  render() {
    const marketItems = this.state.market.map(item => <MarketItem key={item.id} product={item} />)

    return (
      <div>
          {marketItems}
      </div>
    );
  }
}

export default MarketContainer;

儿童

import React, {Component}  from 'react';

class MarketItem extends Component {
constructor(props){
  super(props)
  this.state = {
        count : 0
      }
}


IncrementItem = () => {
  this.setState({ count: this.state.count + 1 });
}
IncrementItemBy10 = () => {
  this.setState({ count: this.state.count + 10 });
}

render(){
    return (
      <div className="MarketItem">
        <div className="market__content">
            <h1>{this.props.product.name + " " + this.props.product.price}</h1>   
        </div> 
            <div className="market__counter">
              <button className="market__button--minus" onClick={this.DecreaseItem}>-</button>
              <p>{this.state.count}</p>
              <button className="market__button--plus" onClick={this.IncrementItem}>+</button>
            </div>

      </div>
    );
  }
}
export default MarketItem;

在parent（marketContainer）中，我想从每个子组件中获取计数，名称和价格，创建一个新组件。我已经尝试过表单，但是如果我使用生命周期方法，我真的不满意吗？终极版？路由器？

Answer 1

class MarketContainer extends Component {
   state = {
    count : 0
   }

   IncrementItem = () => {
   this.setState({count: count + 1})
   }

   DecreaseItem = () => {
   this.setState({count: count - 1})
   }

 render() {
const marketItems = this.state.market.map(item => <MarketItem key={item.id} 
  product={item} IncrementItem={this.IncrementItem} DecreaseItem={DecreaseItem} count={this.state.count}/>)

   return (
    <div>
      {marketItems}
    </div>
  );
 }
}

现在，当用户单击增量和减量图标时，您可以在MarketItem组件上使用IncrementItem和DecreaseItem道具。我们也从父组件传递count的值，这样你就可以在子组件中显示。

Answer 2

你需要在React中使用Lifting State Up

Answer 3

您可以在MarketContainer中为计数和其他需要传递给其他子组件的字段定义状态。

我试图包含代码来说明我将如何做到这一点。

   //MarketData.js
    //after ajax request
    const marketData = [

      {
        id: 1, 
        name: "product1", 
        price: "$1"
      }, 

      {
        id: 2, 
        name: "product2", 
        price: "$2"
      }
    ]; 

    //We can format market data as per we need it in components

    const formattedMarketData = marketData.map(e => {
        e.count = 0; 
        return e;
    });





  //parent component
    //let us define all the things which we might need to pass to other components in here
    // ... 

    constructor()
    {
        super(); 
        this.state = {
            markets: formattedMarketData
        }

    }

    /* we are handling all state changes in parent component
     we have updated state in parent component
     we can deliver the changed state to any other components */
    IncrementItem = (id) => {
        this.setState((prevState) => {
            const markets = {...prevState.markets}; 
            const index = markets.findIndex(x => x.id ===id);
            markets[index].count = prevState.markets[index].count + 1; 
            return {
                markets: markets
            };
        });
    }

    DecrementItem = (id) => {
        this.setState((prevState) => {
            const markets = {...prevState.markets};
            const index = markets.findIndex(x => x.id ===id);
            markets[index].count = prevState.markets[index].count - 1; 
            return {
                markets: markets
            };
        });
    }

    render() {
        const marketItems = this.state.market.map(item => <MarketItem IncrementItem={this.IncrementItem} DecrementItem={this.DecrementItem} key={item.id} product={item} />)

        return (
          <div>
              {marketItems}
          </div>
        );
      }



//child component 

export default (props) => {
 const {IncrementItem, DecreaseItem, product} = props;
 <div className="MarketItem">
        <div className="market__content">
            <h1>{product.name + " " + product.price}</h1>   
        </div> 
            <div className="market__counter">
              <button className="market__button--minus" onClick={() => {DecreaseItem(product.id)}}>-</button>
              <p>{product.count}</p>
              <button className="market__button--plus" onClick={() => {IncrementItem(product.id)}}>+</button>
            </div>

      </div>
};

Answer 4

我认为这是你设计你的州以保持计数与产品相关的方式。

import React, { Component } from 'react';
import MarketItem from './MarketItem.js'

class MarketContainer extends Component {
 constructor() {
    super()
    this.state = {
          market:  [
            {
                id: 1,
                name: "product1",
                price: "$2",
                count:0,
            },
            {
                id: 2,
                name: "product2",
                price: "$3",
                count:0,
            },
            {
                id: 2,
                name: "product3",
                price: "$3",
                count:0,
            }
        ]
    }
}

IncrementItem = (i) => {
    let market = this.state.market;
    market[i].count += 1; 
    this.setState({market});
}

DecreaseItem = (i) => {
    let market = this.state.market;
    market[i].count -= (market[i].count > 0) ? 1: 0; 
    this.setState({market});
}

render() {
    const marketItems = this.state.market.map(item => <MarketItem key={item.id} product={item}  i={i} IncrementItem={this.IncrementItem} DecreaseItem={this.DecreaseItem}/>)

    return (
      <div>
          {marketItems}
      </div>
    );
 }
}

export default MarketContainer;

儿童

import React, {Component}  from 'react';

class MarketItem extends Component {
 constructor(props){
   super(props);
 }

 render(){
    return (
      <div className="MarketItem">
        <div className="market__content">
            <h1>{this.props.product.name + " " + this.props.product.price}</h1>   
        </div> 
            <div className="market__counter">
              <button className="market__button--minus" onClick={() => this.props.DecreaseItem(this.props.i)}>-</button>
              <p>{this.state.count}</p>

              <button className="market__button--plus" onClick={() => this.props.IncrementItem(this.props.i)}>+</button>
            </div>

      </div>
    );
 }
}

export default MarketItem;