【问题标题】:React Native iterate through array objects and cacluate sum up valueReact Native 遍历数组对象并计算求和值
【发布时间】:2018-12-15 12:50:29
【问题描述】:

我在我的 React Native App 中编写了一个函数,我调用了一个 api,它把这个带有对象的 json 数组变成了我,并存储在this.props.data:

           [{name:'Jhon', income:28, spending:20},
            {name:'Anna', income:82, spending:50},
            {name:'Peter', income:141, spending:70}
           ]

我希望遍历这个数组对象并总结收入和支出值,最终生成一个新对象(每个人)并附加到原始this.props.data 并制作如下所示:

           [{name:'Jhon', income:28, spending:20},
            {name:'Anna', income:82, spending:50},
            {name:'Peter', income:141, spending:70},
            {name:'Everyone', income:251, spending:140}
           ]

我目前的尝试如下,但并没有真正奏效,请提供代码示例,谢谢

const CustomListview = ({ itemList }) => (
    var everyoneObject = {
      name: 'everyone',
      income: 0,
      spending: 0
    }

    itemList.map(({name, income, spending}) => { 
        everyoneObject = {
          name: 'everyone',
          income: income++,
          spending: spending++
        }
    })

    itemList.push(everyoneObject);

    <View style={styles.container}>
        <FlatList
            data={itemList}
            renderItem={({ item }) =>
              <TillReportRow
                  name={item.name}
                  income={item.income}
                  spending={item.spending}
              />}
            keyExtractor={(item, index) => index.toString()}
        />
    </View>
);

【问题讨论】:

    标签: reactjs react-native react-redux react-native-ios react-native-flatlist


    【解决方案1】:

    你几乎已经接近正确的逻辑了,

    这可能是您实现这一目标的一种方式,

     let everyOneObj = { name:'Everyone', income: 0, spending: 0 };
    
     itemList.forEach((item) => { `
          everyOneObj.income += item.income;
          everyOneObj.spending += item.spending;
     });
    
     itemList.push(everyOneObj);
    

    【讨论】:

      【解决方案2】:

      您需要使用reduce 来创建单个新对象,而不是map

      const itemList = [
        { name: "Jhon", income: 28, spending: 20 },
        { name: "Anna", income: 82, spending: 50 },
        { name: "Peter", income: 141, spending: 70 }
      ];
      
      const everyone = itemList.reduce(
        (acc, { income, spending }) => {
          acc.income += income;
          acc.spending += spending;
          return acc;
        },
        { name: "everyone", income: 0, spending: 0 }
      );
      
      itemList.push(everyone);
      console.log(itemList);
      

      打印出来的

      [
        { name: "Jhon", income: 28, spending: 20 },
        { name: "Anna", income: 82, spending: 50 },
        { name: "Peter", income: 141, spending: 70 },
        { name: "everyone", income: 251, spending: 140 }
      ]
      

      【讨论】:

        猜你喜欢
        • 2021-01-30
        • 2021-08-11
        • 1970-01-01
        • 1970-01-01
        • 2020-12-15
        • 1970-01-01
        • 2019-08-22
        • 2019-11-22
        • 2017-05-20
        相关资源
        最近更新 更多