0

对于这里的 React 大神，我想知道我的代码是否可以改进。

目标是添加/更新嵌套在对象中的对象数组。

这是主要对象：

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

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

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

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

添加到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()？

感谢您的反馈意见。

4

2 回答 2

1

你可以尝试这样的事情：

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})
}
于 2021-08-18T14:47:11.183 回答
0

我看到 add 函数工作正常，你只需要这样的更新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,
      };
    }),
  });
}
于 2021-08-18T14:35:15.520 回答