Блог

У меня есть эта страница приложения create-react, prioritessearch, в котором есть массив (приоритеты) как часть его состояния. Я сопоставляю каждый индекс массива (priorityObj) с компонентом, подобным этому:

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

Каждый приоритетный объект выглядит следующим образом:

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

Компонент имеет две функциональные возможности. Во-первых, просто сопоставьте каждое значение объекта приоритета, снова сопоставив массивы «Приоритет» с простым тегом абзаца. Во-вторых, следует перейти к форме полей, в которых значение по умолчанию/заполнитель являются текущими значениями. Снова сопоставление массивов «Приоритетов» с большим количеством полей.

Теперь я также хочу, чтобы пользователи могли добавлять пустое поле и удалять поля для каждого массива «Приоритет», когда компонент находится во второй форме (входы).

Моя первоначальная идея состояла в том, чтобы передать функцию «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, чтобы она отображалась на вход, как и другие члены массива.

Однако приоритетное выражение, переданное прямо здесь при создании компонента: const PriorityObjComp = ({ priorityIndex, priorityObj, addNewPriority }) , всегда не определено…

Если у вас есть способ получить индекс или какие-либо другие решения общей проблемы, мы будем вам очень признательны.