ReactJS：add/update 带有钩子的对象数组

Question

楼下的React大神，我想知道我的代码是否可以改进。

目标是add/update对象数组嵌套在一个对象中。

这里是主要对象：

const initialProductData = {
        _id: "",
        name: "",
        description: "",
        type: "",
        sold: true,
        source: "",
        parents: [],
        isSubmitting: false
    };

    const [productData, setProductData] = useState(initialProductData);

除 parents 之外的所有值都来自常规 form，更新它们没有问题。

对于 parents 数组，我有一个由 onChange 在接收 event 的输入字段上触发的函数和一个来自 react-data-table-component 的 row 的对象] table.

添加到parents数组的对象如下：

const parent_obj = {
        parent_id: "",
        parent_product: "",
        qty_needed: ""
    }

我需要做的是：

添加该对象+字段的值，如果它不在父数组中。
如果对象已经在父数组中，则更新对象

我目前有效的是：

const handledParent = (event, row) => {
        let existing_parent = false;
        for (let i = 0; i < productData.parents.length; i++) {
            if (productData.parents[i].parent_id === row.id) {
                existing_parent = true;
                break;
            }
        }

        if (existing_parent) {
            setProductData({
                ...productData,
                parents: productData.parents.map((parent) => {
                    if (parent.id === row.id) return [
                        ...productData.parents,
                        {
                            parent_id: row.id,
                            parent_product: row.product,
                            qty_needed: event.target.value
                        }];
                    return {
                        ...parent,
                        qty_needed: event.target.value
                    };
                })
            })
        }
        else {
            setProductData({
                ...productData,
                parents: [
                    ...productData.parents,
                    {
                        parent_id: row.id,
                        parent_product: row.product,
                        qty_needed: event.target.value
                    }
                ]
            });
        }
    }

我是不是把事情搞得太复杂了？有没有办法用一个 setProductData() 来做到这一点？

感谢您的反馈。

Answer 1

我看到添加功能工作正常，您只需要像这样更新 existing_parent 和 update 逻辑：

const existing_parent = productData.parents.find(tem => parent_id.parent_id === row.id);

if (existing_parent) {
  setProductData({
    ...productData,
    parents: productData.parents.map((parent) => {
      if (parent.id === row.id) {
        return {
          parent_id: row.id,
          parent_product: row.product,
          qty_needed: event.target.value,
        };
      }

      return {
        ...parent,
        qty_needed: event.target.value,
      };
    }),
  });
}

Answer 2

您可以尝试这样的操作：

const handledParent = (event, row) => {
        // return the object's index if it exist or -1if not
        let indexFound = productData.parents.findIndex((parent) =>parent.parent_id === row.id);

        let parentsArray = productData.parents;
// if parent exist in the productData array
        if(indexFound !== -1){
        let parent = {...parentsArray[indexFound] , qty_needed: event.target.value}
         parentsArray[indexFound] = parent 
        
       } else { parentsArray.push({parent_id: row.id,
                        parent_product: row.product,
                        qty_needed: event.target.value}) }

  setProductData({...productData, parents: parentsArray})
}

ReactJS：add/update 带有钩子的对象数组

ReactJS: add/update an array of objects with hooks

reactjs

react-hooks

react-data-table-component