es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • React readOnlyError.js:2 Error sin capturar (en la promesa) de tipo TypeError: “searchData” es de solo lectura

React readOnlyError.js:2 Error sin capturar (en la promesa) de tipo TypeError: “searchData” es de solo lectura

25 Jul, 2023 Programación

Como se puede ver en el código a continuación, mientras se escribe o se busca, el usuario también busca los datos en la base de datos según lo que el usuario está escribiendo.

const searchData = useState();
const fetchSearchPerson = async (name) => {
  const { data } = await client.query({
    query: SEARCH_PERSON,
    variables: {
      name: name
    },
  })
  searchData = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve (data); 
    }, 1000);
  });
  return data;
};

.....

fetchSearchPerson(params.suggestTerm)
return searchData.map((data) => {
  console.log("datas: ", data)
});
.....

Error que he encontrado hasta ahora:

enter image description here

ACTUALIZAR

const [searchData, setSearchData] = useState();

const fetchSearchPerson = async (name) => {

  const { data } = await client.query({

    query: SEARCH_PEOPLE,
    variables: {
      name: name,
    },
  })
  const searchDataPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve (data); 
    }, 1000);
  });
  setSearchData(searchDataPromise); // agregar esto
  return data;
};

fetchSearchPerson(params.suggestTerm)
return searchData.map((data) => {
  console.log("datas: ", data)
})

No recibo el error, pero obtengo el resultado de los datos de búsqueda.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Explicación:

    El error en el código se debe a que searchData está declarado como una constante utilizando useState(), lo que significa que no se puede asignar un nuevo valor. Sin embargo, en la función fetchSearchPerson, se crea y se asigna una Promise a searchData, lo que cambia el valor de la constante. Esto lleva a un error en tiempo de ejecución.

    Para solucionar esto, searchData debe ser declarado con una función setter devuelta por useState(), como const [searchData, setSearchData] = useState();. Luego, en lugar de asignar la Promise a searchData, se debe pasar a setSearchData para actualizar el estado. De esta manera, el valor de searchData se actualizará a la Promise resuelta, lo que provocará una nueva renderización del componente.

    Sin embargo, incluso después de hacer esta corrección, es posible que el código aún no funcione como se espera, ya que searchData es una Promise y no un arreglo. Para trabajar con el resultado de la Promise, debes utilizar .then() o await para esperar a que la Promise se resuelva y luego procesar el resultado. Por ejemplo:

    fetchSearchPerson(params.suggestTerm)
setSearchData(searchDataPromise);

searchDataPromise.then((data) => {
  console.log("datas: ", data);
  // hacer algo con los datos, como actualizar la interfaz de usuario
});

    Alternativamente, puedes utilizar async/await para esperar el resultado:

    const result = await searchDataPromise;
console.log("datas: ", result);
// hacer algo con los datos, como actualizar la interfaz de usuario

    Ten en cuenta que en ambos casos, debes manejar el caso en el que la Promise se resuelve con un error utilizando .catch() o lanzando un error.

Comments are closed.