【问题标题】：How to change specific properties on object array?如何更改对象数组的特定属性？
【发布时间】：2021-02-19 04:27:11
【问题描述】：

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

示例是：if (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;

【问题讨论】：

你想改变什么？您关于代码的问题不是很清楚。你想用这段代码做什么？如果您正在检查name 属性是否等于tempLast 值，我认为代码中的条件应该是storeState[i].name === tempLast。同样，这里的目标不是很清楚。
@DrewReese 嗨，我很抱歉没有明确说明我的问题。我还上传了图片，看看是否可以帮助其他人了解我的确切要求。
那么如果对象的当前key与参数匹配，更新key关联的value?，即key="last"，更新objectArray[1].lastvalue，如果key="name"更新name 两个元素的属性？
@DrewReese 是的，这就是我想要做的......我知道如何获取密钥的值，但不确定如何检查密钥是否等于收到的密钥从参数..
@DrewReese 非常感谢！这正是我所需要的。但我正在查看您的代码并试图了解您所做的事情。我真的不想在不了解代码实际在做什么的情况下使用它。

标签： javascript css arrays reactjs object

【解决方案1】：

我认为你的修改步骤是：

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

【讨论】：

【解决方案2】：

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

这是一个示例 onHandle 函数，它映射 objectTemp 状态并创建对象的对象条目数组（即键值对数组）。它将条目数组还原为一个对象，同时检查对象键是否匹配。

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

演示

【讨论】：