Escenario -
Supongamos que hay una API que proporciona una lista de libros.
[ { id:1, name: "A", author: "https://author/1" }, { id:2, name: "B", author: "https://author/10" }, { id:3, name: "A", author: "https://author/3" }, { id:4, name: "A", author: "https://author/1" } ... ]Ahora, necesito llamar a la API del autor para obtener los detalles del autor, pero debo evitar llamar a las API que ya se han llamado.
Intenté hacerlo manteniendo un objeto de estado y actualizando el objeto cada vez que se llama a una nueva API. Si la URL de la API ya tiene una entrada en el objeto, esa llamada no se repite. Sin embargo, sospecho que, debido a la naturaleza asíncrona de setState , la actualización del objeto de estado se anula y, en la iteración posterior, cuando compruebo el objeto para encontrar la entrada anterior, no se refleja.
... const[authorDetail, setAuthorDetail] = useState({}); useEffect(() => { for(let i=0;i<books.length;i++) { if(!authorDetail[books[i].author]) { // make API call to fetch author detail authorDetail[books[i].author] = "called" setState({...authorDetail}); } });¿Cómo puedo optimizar la llamada a la API para este caso? Por ejemplo, si tengo 7 libros de Harry Potter, me gustaría hacer una sola llamada para obtener los datos de JK Rowling.
Creo que el problema aquí es que su efecto es mantener una referencia al objeto de estado anterior. Creo que la forma más fácil de resolverlo será usando un objeto ref.
const authorDetail = useRef({}); useEffect(() => { for (let i = 0;i < books.length; i++) { if (!authorDetail.current[books[i].author]) { // make API call to fetch author detail authorDetail.current[books[i].author] = "called" } } }, [books]); // note the dependencies here! books es una dependencia para el efecto, pero también podría proporcionar corchetes vacíos ( [] ) que obligarán a que se ejecute solo cuando se monte el componente.