错误类型错误：无法读取 null 的属性（读取“id”）

Question

尝试使用 PHP 和 JS 的管理系统和农业控制系统，在 Consola 上发现错误： 获取 Agremiado 信息时出现错误 TypeError：无法读取 null 的属性（读取“id”） 在 window.insertAgremiadoTable (refreshTableAdd.js:10:42)

保存存档代码refreshTableAdd.js

// Define la función globalmente adjuntándola al objeto window
window.insertAgremiadoTable = async function () {
  try {
    const response = await axios.get(`acciones/getUltimoAgremiado.php`);
    if (response.status === 200) {
      const infoAgremiado = response.data; // Obtener los datos del Agremiado desde la respuesta
      let tableBody = document.querySelector("#table_agremiados tbody");

      let tr = document.createElement("tr");
      tr.id = `agremiado_${infoAgremiado.id}`;
      tr.innerHTML = `
        <th class="dt-type-numeric sorting_1" scope="row">${
          infoAgremiado.id
        }</th>
        <td>${infoAgremiado.nombre}</td>
        <td>${infoAgremiado.cedula}</td>
        <td>${infoAgremiado.estado}</td>
        <td>
          <img class="rounded-circle" src="acciones/fotos_agremiados/${
            infoAgremiado.avatar || "sin-foto.jpg"
          }" alt="${infoAgremiado.nombre}" width="50" height="50">
        </td>
        <td>
          <a title="Ver detalles del agremiado" href="#" onclick="verDetallesAgremiado(${
            infoAgremiado.id
          })" class="btn btn-success"><i class="bi bi-binoculars"></i></a>
          <a title="Editar datos del agremiado" href="#" onclick="editarAgremiado(${
            infoAgremiado.id
          })" class="btn btn-warning"><i class="bi bi-pencil-square"></i></a>
          <a title="Eliminar datos del agremiado" href="#" onclick="eliminarAgremiado(${
            infoAgremiado.id
          }, '${
        infoAgremiado.avatar || ""
      }')" class="btn btn-danger"><i class="bi bi-trash"></i></a>
        </td>
      `;

      // Insertar el nuevo elemento al final de la tabla
      tableBody.appendChild(tr);
    }
  } catch (error) {
    console.error("Error al obtener la información del Agremiado", error);
  }
};

这是存档的代码 addAgremiado.js:

/**
 * Modal para agregar un nuevo agremiado
 */
async function modalRegistrarAgremiado() {
  try {
    // Ocultar la modal si está abierta
    const existingModal = document.getElementById("detalleAgremiadoModal");
    if (existingModal) {
      const modal = bootstrap.Modal.getInstance(existingModal);
      if (modal) {
        modal.hide();
      }
      existingModal.remove(); // Eliminar la modal existente
    }

    const response = await fetch("modales/modalAdd.php");

    if (!response.ok) {
      throw new Error("Error al cargar la modal");
    }

    // response.text() es un método en programación que se utiliza para obtener el contenido de texto de una respuesta HTTP
    const data = await response.text();

    // Crear un elemento div para almacenar el contenido de la modal
    const modalContainer = document.createElement("div");
    modalContainer.innerHTML = data;

    // Agregar la modal al documento actual
    document.body.appendChild(modalContainer);

    // Mostrar la modal
    const myModal = new bootstrap.Modal(
      modalContainer.querySelector("#agregarAgremiadoModal")
    );
    myModal.show();
  } catch (error) {
    console.error(error);
  }
}

/**
 * Función para enviar el formulario al backend
 */
async function registrarAgremiado(event) {
  try {
    event.preventDefault(); // Evitar que la página se recargue al enviar el formulario

    const formulario = document.querySelector("#formularioAgremiado");
    // Crear un objeto FormData para enviar los datos del formulario
    const formData = new FormData(formulario);

    // Enviar los datos del formulario al backend usando Axios
    const response = await axios.post("acciones/acciones.php", formData);

    // Verificar la respuesta del backend
    if (response.status === 200) {
      // Llamar a la función insertAgremiadoTable para insertar el nuevo registro en la tabla
      window.insertAgremiadoTable();

      setTimeout(() => {
        $("#agregarAgremiadoModal").css("opacity", "");
    `    $("#agregarAgremiadoModal").modal("hide");

        //Llamar a la función para mostrar un mensaje de éxito
        toastr.options = window.toastrOptions;
        toastr.success("¡El Agremiado se actualizo correctamente!.");
      }, 600);
    } else {
      console.error("Error al registrar el Agremiado");
    }
  } catch (error) {
    console.error("Error al enviar el formulario", error);
  }
}

不，他会解决错误，他可能会遇到不同的情况。

Answer 1

由于错误信息，该属性

id

对象

infoAgremiado

不存在。 Lo más probable, en este caso, es que

infoAgremiado

ni siquiera sea un object.

您的

acciones/getUltimoAgremiado.php

的格式是这样吗？ Tendrías que averiguarlo，por ejemplo ejecutando

console.log(response.data)

justo después de recibir el resultado del script en PHP.

此外，您还可以在

string

中解决 PHP 问题，内容是

JSON

中的对象信息。 En este caso, tentrías que ejecutar un

decode

sobre

response.data

, y no veo que lo estés haciendo.

Para eso，bastaría con añadir el

decode

de

JSON

en la linea 6，cambiando：

const infoAgremiado = response.data;

来源：

const infoAgremiado = JSON.decode(response.data);

Si，de hecho，

response.data

viene como digo，esto debería solucionarte el Problema。 Pero estarás seguro de ello haciendo

console.log(responde.data)

, como explicado arriba.