React JS函数中数组中每个对象的更新属性 [英] Update Property of Every Object in Array in React JS Function

问题描述

我有一个对象数组。我想更新函数内数组中每个对象的一个​​属性。

我在 render 之外声明了一个函数：

  const computePiePercentages = function（pieChartData，剩余预算）{
 var分母= 1600; 
 if（remainingBudget> 0）{
分母= 1600-剩余预算
} 
 
 
 return pieChartData.map（（val，j）=> ; {$
 val.y = Number（（val.y / denominator）.toFixed（1））* 100 
 
}）; 
 
 
}； 
  

我还是很新的反应-我知道 pieChartData.map（ （val，j）允许我循环遍历数组中的对象。我想通过 return pieChartData.map（（val，j）我会返回更新后的数组。但是，情况似乎并非如此。我目前正在获得无法读取scale.js的未定义属性'x'（我甚至都不知道这个文件）

我在这里调用该函数：

  render（）{
 
 const {数据，剩余预算，pieChartData，outOfBudget，已回答问题} = this.state; 
 
 const问题= data.questions； 
返回（
< div> 
 {answeredQuestions == 1&& 
< div> 
< VictoryPie 
 colorScale = blue 
数据= {computePiePercentages（pieChartData，剩余预算）} 
 //数据= {this.state.pieChartData} 
标签= {d => $ {d.x}：$ {d.y}％`} 
 style = {{父母：{maxWidth：‘50％’}}} 
 /> 
 {outOfBudget.length> 0&& 
< div> 
< Table> 
<预算外的< / th; 
< BrokeBudget 
 outOfBudget = {outOfBudget} 
 /> 
< / Table> 
< / div> 
} 
< / div> 
} 
< / div> 
）; 
} 
} 
  

解决方案

map（）方法创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数。因此，您必须从新数组的回调函数返回一个值，因为它不会修改现有数组。

map会为一个数组中的每个元素调用一次提供的回调函数

因此下面应该为您解决该问题：

< pre class = snippet-code-js lang-js prettyprint-override> const computePiePercentages = function（pieChartData，剩余预算）{var分母= 1600; if（remainingBudget> 0）{分母= 1600-剩余预算} return pieChartData.map（（val，j）=> {let newVal = Object.assign（{}，val）; newVal.y = Number（（newVal。 y /分母）.toFixed（1））* 100 return newVal;}）; };

I have an array of objects. I want to update one property of every object in the array inside a function.

I declare a function outside render:

const computePiePercentages = function(pieChartData, remainingBudget){
  var denominator = 1600;
  if(remainingBudget > 0){
    denominator = 1600 - remainingBudget
  }


  return pieChartData.map((val, j) => {
    val.y = Number((val.y / denominator).toFixed(1)) * 100

  });


  };

I am still very new to react - I know that pieChartData.map((val, j) allows me to loop through the objects in my array. I thought by return pieChartData.map((val, j) I would be returning the updated array. However, that doesn't appear to be the case. I am currently getting Cannot read property 'x' of undefined for scale.js (I dont even know this file)

I call the function here:

render() {

    const { data, remainingBudget, pieChartData, outOfBudget, answeredQuestions } = this.state;

    const questions = data.questions;
    return (
      <div>
          {answeredQuestions == 1 &&
          <div>
            <VictoryPie
              colorScale = "blue"
              data = {computePiePercentages(pieChartData, remainingBudget)}
              //data = {this.state.pieChartData}
              labels= {d => `${d.x}: ${d.y}%`}
              style={{ parent: { maxWidth: '50%' } }}
              />
            {outOfBudget.length > 0 &&
              <div>
              <Table>
                <th>Out of Budget</th>
                < BrokeBudget
                  outOfBudget={outOfBudget}
                  />
              </Table>
              </div>
            }
          </div>
        }
      </div>
    );
  }
}

解决方案

The map() method creates a new array with the results of calling a provided function on every element in the calling array. So you must return a value from callback function for the new array, as it doesn't modify existing array.

map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results.

So below should fix the issue for you :

const computePiePercentages = function(pieChartData, remainingBudget){
  var denominator = 1600;
  if(remainingBudget > 0){
    denominator = 1600 - remainingBudget
  }


  return pieChartData.map((val, j) => {
    let newVal = Object.assign({}, val);
    newVal.y = Number((newVal.y / denominator).toFixed(1)) * 100
    return newVal;
  });


  };

这篇关于React JS函数中数组中每个对象的更新属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！