javascript - 反应钩子，将array.map的索引作为prop传递是未定义的

Question

我有一个 create-react-app，prioritiesSearch 的这个页面，它有一个数组（优先级）作为它的状态的一部分。我将每个数组索引（priorityObj）映射到一个组件，如下所示：

priorities.map((priorityObj, idx) => <PriorityObjComp key={idx} priorityIndex={idx} priorityObj={priorityObj} addNewPriority={addNewPriority} />

每个 priorityObj 看起来像这样：

{
    "id": 0,
    "highPriority": [""],
    "medPriority": [""],
    "lowPriority": [""],
    "group": "",
}

该组件有两个功能。首先是映射优先级对象的每个值，再次使用“优先级”数组映射到一个简单的段落标签。其次是更改为默认值/占位符为当前值的字段形式。再次将“优先级”数组映射到更多字段。

现在，当组件处于第二种形式（输入）时，我还希望用户能够为每个“优先级”数组添加一个空字段并删除字段。

我最初的想法是从页面prioritiesSearch中传入一个函数“addNewPriority”作为道具。这里是：

const addNewPriority = (type, key) => {
        if(type==="high") priorities[key].priorityObj.highPriority.push("");
        if(type==="med") priorities[key].priorityObj.medPriority.push("");
        if(type==="low") priorities[key].priorityObj.lowPriority.push("");

    }

组件中的每个“优先级”数组部分都有一个类似onClick={() => addNewPriority("high", priorityIndex)}. 理想情况下，将一个空字符串推入 PriorityObject 的 Priority 数组，这样它将像其他数组成员一样映射到输入。

但是，创建组件时在此处传递的priorityIndex： const PriorityObjComp = ({ priorityIndex, priorityObj, addNewPriority }) 始终未定义...

如果您有办法获得索引，或任何其他解决整体问题的方法，将不胜感激。

标签： javascriptarraysreactjsreact-hooks