数组对象未更新状态

Roman 发表于 Dev

罗曼

我有一个表格，用户可以在其中添加任意数量的文档。每个文档都有多个输入。而且我正在尝试让每个文档输入值并将其作为对象数组置于状态。状态应如下所示：

[
   {
      id: 'UGN2WP68P1',
      name: 'passport',
      placeIssue: 'paris'
   },
   {
      id: 'TD0KUWWIM6',
      name: 'shengen visa',
      placeIssue: 'paris'
   }
   ...
]

所以我写了一个在输入变化时调用的函数。他检查是否存在具有相同ID的对象，如果没有具有相同ID的对象，则创建新对象并添加到数组中，如果存在具有相同ID的对象，则他更新对象：

const addNewDocumentObj = (id, type, val) => {
        // Get object with same id
        let docObj = addedDocsArr.filter( el => el.id === id)
        
        // If there is no object with same id, creates new one
        if (docObj.length === 0) {
            if (type === 'name'){
                let obj = {
                    id: id,
                    docId: val.id
                }
                setAddedDocsArr(addedDocsArr.concat(obj))
            } else if (type === 'placeIssue') {
                let obj = {
                    id: id,
                    placeIssue: val
                }
                setAddedDocsArr(addedDocsArr.concat(obj))
            }
        // If object exist with same id then updates with new value and adds to array
        } else {
            if (type === 'name'){
                let newObject = Object.assign(docObj, {name: val.id})
                let newArray = addedDocsArr.filter(el => el.id !== id)
                setAddedDocsArr(newArray.concat(newObject))
            } else if (type === 'placeIssue') {
                let newObject = Object.assign(docObj, {placeIssue: val})
                let newArray = addedDocsArr.filter(el => el.id !== id)
                setAddedDocsArr(newArray.concat(newObject))
            } 
        }
    }

但这行不通，而且我不明白为什么，也许我的逻辑不好并且有更好的实践？

更新：在React调试器中，我注意到状态如何变化。如果添加选择文档名称，则状态对象如下所示：

{name: 'passport', id: 'UGN2WP68P1'}

如果输入文件的发行地点值。然后对象发生变化并显示如下数据：

{placeIssue: 'paris', id: 'UGN2WP68P1'}

但是结果应该是：

{name: 'passport', placeIssue: 'paris', id: 'UGN2WP68P1'}

所以看起来该对象没有更新，但是创建了一个新对象

罗曼

我找到一种解决此问题的简便方法。我阅读了React表单的文档并找到了多个输入想法React Forms，因此我将代码更改为：

// Update or add information of added documents inputs
const addNewDocumentObj = (id, e, name) => {
        const newInput = addedDocsArr.map(el => {
            if(id === el.id) {
                if(name === 'name'){
                    el[name] = e.target.value
                } else if (name === 'placeIssue'){
                    el[name] = e.target.value
                }
            }
            return el
          })
          
          setAddedDocsArr(newInput);
    }

// Add new document inputs
    const addNewDocument = () => {
        let blockId = randomNumber(10, true, false)

        setAddedDocsArr([...addedDocsArr, {id: blockId, name: '', placeIssue: ''}])
    }