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

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

我在

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）

允许我循环遍历数组中的对象。我想通过

返回pieChartData.map（（val，j）

我将返回更新后的数组。但是，情况似乎并非如此。我目前无法读取scale.js的未定义的属性“x”（我甚至不知道此文件）

我在这里调用函数：

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

render（）{
const{data，remainingBudget，pieChartData，outOfBudget，answeredQuestions}=this.state；
const questions=data.questions；
返回(
{回答的问题==1&&
`${d.x}:${d.y}%`}
样式={{parent:{maxWidth:'50%'}}
/>
{outOfBudget.length>0&&
超出预算
预算
outOfBudget={outOfBudget}
/>
}
}
);
}
}

问题在于

映射

函数中没有返回值：

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

也可以考虑只存储这个修改版本的PyCaltDATA，因此在每次渲染组件时不需要计算这个值。方法创建一个新数组，其结果是对调用数组中的每个元素调用提供的函数。因此，您必须从新数组的回调函数返回一个值，因为它不会修改现有数组

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

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

const computepieepercentrates=函数（pieChartData，剩余预算）{
var分母=1600；
如果（剩余预算>0）{
分母=1600-剩余预算
}
返回pieChartData.map（（val，j）=>{
设newVal=Object.assign（{}，val）；
newVal.y=数字（（newVal.y/分母）.toFixed（1））*100
返回newVal；
});
}

小心，所有答案（到目前为止）都会直接变异状态对象，这在React中是禁止的。什么是安全的解决方案？基于，在映射时应该返回一个新对象：

pieChartData.map（（val，j）=>（{…val，y:/*计算在这里*/}））

但是

y

是

val

的一个属性-语法

{…val，y:/*计算在这里*/}

suggest

y

是数组中的另一个元素吗？

…val

将

val

的属性扩展到我们的新对象中，然后我们用计算覆盖新对象中的

y

属性：

Number（（val.y/分母）。toFixed（1））*100

val.y=/***/

会修改新数组中的对象，这些对象是以前状态下的共享引用。我在问题的注释中给出了一个，请随意使用！我已经使用了Object.assign