Espero que esta sea una pregunta fácil, pero parece que no puedo resolverla.
Estoy intentando agregar una clave a un objeto que se mantiene en el estado. Este par de clave y valor no existe antes, lo que creo que es lo que me está dando el problema. De todos modos, esto es lo que tengo hasta ahora:
const Reducer = (state, action) => { switch (action.type) { case "SET_STUDENT_TAGS": const userID = action.payload.id; let studentIndex = state.originalStudentList.students.findIndex(obj => obj.id === action.payload.id); return { ...state, originalStudentList: { ...state.originalStudentList, students: { [studentIndex]: { tags: "test" } } } };Ahora, el problema con el que me encuentro es que puedo ejecutar findIndex una vez, pero cualquier intento posterior simplemente bloquea mi aplicación y dice que no es una función. De manera similar, la lógica de estado establecida en el reductor tampoco funciona, ya que no puede encontrar "etiquetas". Así que supongo que no sé cómo hacer esto. Así es como se ven los datos que se están alimentando:
{ "students": [ { "id": "1", }, { "id": "2", } ] }aquí está la función del cuadro de entrada:
const addTag = (event, student) => { if (event.key === "Enter") { if (event.target.value != "") { dispatch({ type: "SET_STUDENT_TAGS", payload: { id: student.id, value: event.target.value, }, }); event.target.value = ""; } else { return; } } };lo que me gustaría lograr:
{ "students": [ { "id": "1", "tags": ["cat", "dog"] }, { "id": "2", "tags": ["cat", "parrot"] } ] }Así que estoy perdido en cuanto a cómo hacer esto correctamente. ¡Agradezco cualquier ayuda!
Está en el camino correcto, pero esa sintaxis reemplaza la matriz con un objeto normal, razón por la cual findIndex falla después de la primera vez. Para obtener más información, consulte esta respuesta .
Y luego, para agregar una propiedad al estudiante específico, simplemente reemplácelo con un objeto que extienda el original y agregue las etiquetas:
const Reducer = (state, action) => { switch (action.type) { case "SET_STUDENT_TAGS": const userID = action.payload.id; let studentIndex = state.originalStudentList.students.findIndex(obj => obj.id === action.payload.id); let student = state.originalStudentList.students[studentIndex]; return { ...state, originalStudentList: { ...state.originalStudentList, students: [ state.originalStudentList.students.slice(0, studentIndex), { ...student, tags: action.payload.tags }, state.originalStudentList.students.slice(studentIndex+1) ] } };