無法從陣列中洗掉物件，react.js

childArray我正在嘗試從嵌套到另一個陣列中的專案中洗掉一個專案。

這就是我正在嘗試的方式。

const childArrayHandler = (childData, sub, questionId, data, btnId) => {
    // Manage color change on click
    const isInList = selectedBtnList.some((item) => item === btnId)
    if (isInList) {
      onSelectedBtnListChange(selectedBtnList.filter((item) => item !== btnId))
    } else {
      onSelectedBtnListChange([...selectedBtnList, btnId])
    }

    // Manage childData Array 
    // copy data to mutable object
    const currentChildData = [...childData]
    const hasId = currentChildData.find(({ id }) => sub.id === id)

    if (!hasId) {
      // add item to childArray if same index is not available in the childArray
      const newChild = { id: sub.id, sub_question: sub.sub_question, weightage: sub.weightage }
      currentChildData.push(newChild)
      setChildDataOnChange((current) => [...current, newChild])
    } else if (hasId) {
      // remove item from childArray if same index is available in the childArray
      const indexOfChild = currentChildData.indexOf(hasId)
      // console.log('currentChildData', currentChildData, 'indexOfChild', indexOfChild)
      currentChildData.slice(indexOfChild, 1)
      setChildDataOnChange(currentChildData)
    }

    const newData = [...data]

    // find parent of the child
    const parent = newData.find(({ parentId }) => questionId === parentId)

    // find index of parent
    const indexOfParent = newData.indexOf(parent)
    // update data with child related to parent
    newData[indexOfParent].child = currentChildData
    onDataChange(newData)
    localStorage.setItem('deviceReport', JSON.stringify(newData))
  }

問題出在else if塊中，我想如果孩子中有可用的物件索引，那么它應該從陣列中洗掉它。據我所見，我正在使用其他文章建議處理的正確方法，但缺少一些我現在看不到的東西。但無法找到正確的結果。如果我安慰它不會改變任何東西。意味著如果索引已經存在，則不要從陣列中洗掉任何專案。

那么我該如何解決這個問題，或者可能做錯了什么，有沒有其他方法可以做到這一點也請提及它？謝謝

uj5u.com熱心網友回復：

你有這個切片的問題

currentChildData.slice(indexOfChild, 1)

它不會為你初始化一個新陣列（React 的不變性）

修復可能是

currentChildData = currentChildData.slice(0, indexOfChild).concat(currentChildData.slice(indexOfChild   1))

如果你覺得它太復雜，你可以filter改用

currentChildData = currentChildData.filter((item) => item !== hasId) //`hasId` is your found item with `find`

這里的第二個問題是

newData[indexOfParent].child = currentChildData

您不能將值分配給 mutate 物件

正確的方法應該是

newData = newData.map((item) => item === parent ? {...item, child: currentChildData} : item)

完整代碼

const childArrayHandler = (childData, sub, questionId, data, btnId) => {
    // Manage color change on click
    const isInList = selectedBtnList.some((item) => item === btnId)
    if (isInList) {
      onSelectedBtnListChange(selectedBtnList.filter((item) => item !== btnId))
    } else {
      onSelectedBtnListChange([...selectedBtnList, btnId])
    }

    // Manage childData Array 
    // copy data to mutable object
    let currentChildData = [...childData]
    const hasId = currentChildData.find(({ id }) => sub.id === id)

    if (!hasId) {
      // add item to childArray if same index is not available in the childArray
      const newChild = { id: sub.id, sub_question: sub.sub_question, weightage: sub.weightage }
      currentChildData.push(newChild)
      setChildDataOnChange((current) => [...current, newChild])
    } else  {
      // console.log('currentChildData', currentChildData, 'indexOfChild', indexOfChild)
      currentChildData = currentChildData.filter((item) => item !== hasId)
      setChildDataOnChange(currentChildData)
    }

    //let newData = [...data]

    // find parent of the child
    //const parent = newData.find(({ parentId }) => questionId === parentId)

    // update data with child related to parent
    //newData = newData.map((item) => item === parent ? {...item, child: currentChildData} : item)

    //shorter version
    const newData = data.map((item) => item.parentId === questionId ? {...item, child: currentChildData} : item)
    
    onDataChange(newData)
    localStorage.setItem('deviceReport', JSON.stringify(newData))
  }

標籤：javascript 数组 反应

上一篇：構建嵌套JSON

下一篇：C：從函式輸入資料后，無法訪問main中的結構資料