在 React JS 函数中更新数组中每个对象的属性答案

【问题标题】：Update Property of Every Object in Array in React JS Function在 React JS 函数中更新数组中每个对象的属性
【发布时间】：2019-08-22 18:32:21
【问题描述】：

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

我在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

  });


  };

我对反应还是很陌生-我知道pieChartData.map((val, j) 允许我循环遍历数组中的对象。我想return pieChartData.map((val, j) 我会返回更新后的数组。然而，情况似乎并非如此。我目前正在为 scale.js 获取Cannot read property 'x' of undefined（我什至不知道这个文件）

我在这里调用函数：

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

【问题讨论】：

小心，所有答案（到目前为止）都会直接改变状态对象，这在 React 中是被禁止的。
什么是安全的解决方案？
基于Updating an Item in an Array，映射时应该返回一个新对象：pieChartData.map((val, j) => ({ ...val, y: /* computation here */ }))
但是y 是val 的一个属性——{ ...val, y: /* computation here */ } 的语法不是暗示y 是数组中的另一个元素吗？
...val 将val 的属性传播到我们的新对象中，然后我们用计算覆盖新对象中的y 属性：Number((val.y / denominator).toFixed(1)) * 100

标签： javascript arrays reactjs

【解决方案1】：

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

map 为数组中的每个元素按顺序调用一次提供的回调函数，然后根据结果构造一个新数组。

所以下面应该为您解决问题：

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


  };

【讨论】：

val.y = /**/ 确实修改了该新数组中的对象，这些对象是先前状态下的共享引用。
我在问题的cmets中给出了一个，请随意使用！
我用过 Object.assign

【解决方案2】：

问题是您的map 函数中没有返回值：

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

另外，考虑只存储这个修改后的 pieChartData 版本，这样就不需要在每次渲染组件时计算该值。

【讨论】：