Javascript 如何更改对象数组的特定属性？

我对更改对象数组中的属性有疑问。为了更好地理解，我将在下面发布我的代码。首先，我有一个包含两个数组的对象数组，第一个数组包含名为“First”的属性，第二个数组包含“last”。当我单击函数时，它将传递特定的名称，例如first或last作为string。之后，我必须循环遍历对象数组并更改与属性名称（tempFirst，tempLast）匹配的值。我刚刚在onHandle函数中声明，但在我的实际项目中，我正在传递参数

例如：如果（first==first）更改该属性的值

import logo from './logo.svg';
import './App.css';
import react ,{ Component } from 'react';


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      objectTemp: []
    };
  }

  componentDidMount(){
    let objectArray = [
      {
        name: "hello",
        first: 77
      },
      {
        name: "world",
        last: 66
      },
    ]

    this.setState({
      objectTemp: objectArray
    })
  }

  onHandle = () => {
    let tempFirst = "first";
    let tempLast = "last";

    let storeState = [...this.state.objectTemp];
    //console.log(storeState);
    
// here i want to check if either tempfirst or templast is equal to the property on object array
    for(let i = 0; i < storeState.length; i++){
      //if(storeState[i] === tempLast){
        console.log(...storeState[i]);
      //}
    }
  }

  render() {
    console.log(this.state);
    return <button onClick={this.onHandle}>VIEW</button>;
  }
}

export default App;

从“/logo.svg”导入徽标；
导入“/App.css”；
从“react”导入react，{Component}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
objectTemp:[]
};
}
componentDidMount（）{
让objectArray=[
{
姓名：“你好”，
第一：77
},
{
名称：“世界”，
最后：66
},
]
这是我的国家({
objectTemp:objectArray
})
}
onHandle=（）=>{
让tempFirst=“first”；
让tempLast=“last”；
让storeState=[…this.state.objectTemp]；
//console.log（storeState）；
//这里我想检查tempfirst或templast是否等于对象数组上的属性
for（设i=0；i

我认为修改的步骤是：

onHandle = (firstName: string, value: any) => {
    /// Modify your data:
    const newData = this.state.objectTemp.map( item => {
         /// Update Data if matched condition
         if(item.firstName === firstName){
             item.value = value
         }
         return item
    })

    /// Update state
    this.setState({objectTemp: newData})
}

---

我认为您修改的步骤是：

onHandle = (firstName: string, value: any) => {
    /// Modify your data:
    const newData = this.state.objectTemp.map( item => {
         /// Update Data if matched condition
         if(item.firstName === firstName){
             item.value = value
         }
         return item
    })

    /// Update state
    this.setState({objectTemp: newData})
}

---

您可以将以前的状态映射到新状态，在映射每个元素对象时，根据“searchKey”检查每个键，如果找到匹配项，则更新值

下面是一个示例

onHandle

函数，它映射

objectTemp

状态并创建对象项数组（即键值对数组）。它会将entries数组缩减回对象中，并在执行此操作时检查对象键是否匹配

onHandle = (searchKey, newValue) => {
  this.setState(prevState => ({
    // map previous state to next state
    // [obj1, obj2, ...objN]
    objectTemp: prevState.objectTemp.map(obj => {
      // Create array of entries and reduce back into object
      // [[key1, value1], [key2, value2], ...[keyN, valueN]]
      return Object.entries(obj).reduce((obj, [key]) => {
        // If key is a match to search key, create new object and update value,
        // otherwise return existing object
        return key === searchKey
          ? {
            ...obj,
            [key]: newValue
          }
          : obj;
      }, obj);
    })
  }))
}

演示

---

您可以将以前的状态映射到新状态，在映射每个元素对象时，根据“searchKey”检查每个键，如果找到匹配项，则更新值

下面是一个示例

onHandle

函数，它映射

objectTemp

状态并创建对象项数组（即键值对数组）。它会将entries数组缩减回对象中，并在执行此操作时检查对象键是否匹配

onHandle = (searchKey, newValue) => {
  this.setState(prevState => ({
    // map previous state to next state
    // [obj1, obj2, ...objN]
    objectTemp: prevState.objectTemp.map(obj => {
      // Create array of entries and reduce back into object
      // [[key1, value1], [key2, value2], ...[keyN, valueN]]
      return Object.entries(obj).reduce((obj, [key]) => {
        // If key is a match to search key, create new object and update value,
        // otherwise return existing object
        return key === searchKey
          ? {
            ...obj,
            [key]: newValue
          }
          : obj;
      }, obj);
    })
  }))
}

演示

---

您想改变什么？你关于代码的问题不是很清楚。你想用这个代码做什么？如果检查

name

属性是否等于

tempLast

值，我认为代码中的条件应该是

storeState[I].name===tempLast

。再说一遍，这里的目标不是很清楚。@DrewReese嗨，我为我的问题没有说清楚而道歉。我还上传了该图像，看看这是否能帮助其他人理解我的确切要求。因此，如果对象的当前键与参数匹配，请更新与键？关联的值，即key=“last”，update

objectArray[1]。last

value，if key=“name”更新这两个元素的

name

属性？@DrewReese是的，这就是我要做的。。。我知道如何获取密钥的值，但不确定如何检查密钥是否等于从参数接收到的密钥。@drewrese非常感谢！这就是我所需要的。但我正在看你的代码，试图理解你做了什么。我真的不想在不理解代码实际作用的情况下使用它。你想改变什么？你关于代码的问题不是很清楚。你想用这个代码做什么？如果检查

name

属性是否等于

tempLast

值，我认为代码中的条件应该是

storeState[I].name===tempLast

。再说一遍，这里的目标不是很清楚。@DrewReese嗨，我为我的问题没有说清楚而道歉。我还上传了该图像，看看这是否能帮助其他人理解我的确切要求。因此，如果对象的当前键与参数匹配，请更新与键？关联的值，即key=“last”，update

objectArray[1]。last

value，if key=“name”更新这两个元素的

name

属性？@DrewReese是的，这就是我要做的。。。我知道如何获取密钥的值，但不确定如何检查密钥是否等于从参数接收到的密钥。@drewrese非常感谢！这就是我所需要的。但我正在看你的代码，试图理解你做了什么。我真的不想在不理解代码实际在做什么的情况下使用它。