Javascript 是否更改嵌套状态的所有值？

我正在尝试创建一个组件，其中包含十几个嵌套值，并通过一些父道具传递

在这个组件中，我有两个按钮，每个按钮都有一个onClick事件，当按下按钮时，我会尝试让它这样嵌套的props的值被传递给一个函数，并在视图中进行更改和更新

对于本例，我将只传递someChildProp，下面是一个示例道具：

List.defaultProps = {
  someChildProp: {
    field1: 1.4,
    field2: 1.2,
    field3: 1.6,
    field4: 1.1
  }
};

当您按下任一按钮时：

<a className="unit-selected" onClick={handleUnitClick('unit1')}>
  Unit 1
</a>
<span>/</span>
<a onClick={handleUnitClick('unit2')}>
  Unit 2
</a>

因此，在.map中设置一个新的状态看起来像这样

  someChildProp: {
    key[index]: convertUnit(value)
  }

我不确定要做的是如何映射每一个，更改值，设置EntireChildOp的状态

所以我被困在这一点上：

  const convertProps = () => {
    Object.keys(someChildProp).map((item, index) => {
      // set new value with convertUnit(number)
      // concat to new object?
      // set state again?
    })
  }

我该怎么做

---

代码如下：

缺少几个细节，但这大概就是您希望在两个单元之间转换的内容

请注意：

• 在这种情况下，

  按钮

  可能是您想要的（而不是锚定：

  a

  ）
• 对于onClick回调，需要传递函数

  （）=>如下。handleUnitClick（'unit1'）

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
一些儿童道具：{
字段1:1.4，
字段2:1.2，
字段3:1.6，
字段4:1.1
}
};
}
handleUnitClick=类型=>{
如果（类型==“单元1”）{
this.convertProps（this.convertUnitOne）；
}else if（类型==“unit2”）{
this.convertProps（this.convertUnit2）；
}
};
convertProps=convertFn=>{
const someChildProp={}；
Object.keys（this.state.someChildProp）.forEach（item=>{
someChildProp[item]=convertFn（this.state.someChildProp[item]）；
});
this.setState（{someChildProp}）；
};
convertUnitOne=number=>{
返回号码+5；
};
convertUnitTwo=编号=>{
返回号码/5；
};
render（）{
返回(
这个.handleUnitClick（“unit1”）}>unit1
这个.handleUnitClick（“unit2”）}>unit2

{this.state.someChildProp.field1}
{this.state.someChildProp.field2}
{this.state.someChildProp.field3}
{this.state.someChildProp.field4}

);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）

嗨，谢谢，我来试试这个。我还更新了一个codesandbox。@kinx根据您提供的第二个示例更新了答案谢谢，我对您的示例有点困惑。虽然我提供了一个数据的示例，但它将通过props传递，例如{someChildProp，someOtherChildProp}。这就是数据将进入的地方。我假设，我不使用示例字段属性，而是使用React.useState（someChildProp））？然后您可以使用
React.useState（props.someChildProp）
在第一次渲染时“复制”该属性，或者您需要从父级传入一个允许更新该属性的属性，例如，
updatesOMECHILDROP
，这样您的
List
组件就可以调用它。
  const convertProps = () => {
    Object.keys(someChildProp).map((item, index) => {
      // set new value with convertUnit(number)
      // concat to new object?
      // set state again?
    })
  }