在React中如何根据id匹配更新数组内对应对象的属性值

你需要遵循React状态不可变的更新原则，不能直接修改原oldObject数组，而是生成新的数组完成更新，具体实现如下：

核心逻辑说明 #

• 遍历oldObject数组，匹配和newObject.id相同的项
• 匹配到的项直接替换为newObject，也可按需合并属性（不需要整项替换的场景适用）
• 未匹配到的项保持原样返回

代码实现 #

1. 函数组件（useState场景） #

import { useState } from 'react';

function App() {
  // 初始化状态
  const [oldObject, setOldObject] = useState([{ 
    id:1,
    key:'name', 
    fiendSize:'6', 
    fromPlaceHolder:'', 
    fieldInstruction:'',
    filedType:'input', 
    lable:"Single Line ", 
    type:'text', 
    formValidation: {
      required:false
    }
  }]);

  const newObject = { 
    id:1,
    key:'name', 
    fiendSize:'12', 
    fromPlaceHolder:'Enter Your Name', 
    fieldInstruction:'please Enter string only',
    filedType:'input', 
    lable:"Single Line ", 
    type:'text', 
    formValidation: {
      required:true
    }
  };

  // 触发更新的方法
  const updateItem = () => {
    setOldObject(prevList => {
      return prevList.map(item => {
        // id匹配就返回新对象，不匹配返回原对象
        return item.id === newObject.id ? newObject : item;
      })
    })
  }

  return <button onClick={updateItem}>点击更新</button>
}

2. 合并属性而非整项替换的场景 #

如果newObject只传了要修改的字段，不需要覆盖未传的字段，需要做深合并处理嵌套对象：

const updateItem = () => {
  setOldObject(prevList => {
    return prevList.map(item => {
      if (item.id !== newObject.id) return item;
      // 合并一层属性+嵌套的formValidation属性
      return {
        ...item,
        ...newObject,
        formValidation: {
          ...item.formValidation,
          ...newObject.formValidation
        }
      }
    })
  })
}

3. 类组件场景 #

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      oldObject: [{ 
        id:1,
        key:'name', 
        fiendSize:'6', 
        fromPlaceHolder:'', 
        fieldInstruction:'',
        filedType:'input', 
        lable:"Single Line ", 
        type:'text', 
        formValidation: {
          required:false
        }
      }]
    }
  }

  newObject = { 
    id:1,
    key:'name', 
    fiendSize:'12', 
    fromPlaceHolder:'Enter Your Name', 
    fieldInstruction:'please Enter string only',
    filedType:'input', 
    lable:"Single Line ", 
    type:'text', 
    formValidation: {
      required:true
    }
  };

  updateItem = () => {
    this.setState(prevState => ({
      oldObject: prevState.oldObject.map(item => 
        item.id === this.newObject.id ? this.newObject : item
      )
    }))
  }

  render() {
    return <button onClick={this.updateItem}>点击更新</button>
  }
}

内容的提问来源于stack exchange，提问作者Munna Kumar