Mi código :
import Item from './Item_att.js'; import axios from 'axios'; const Attraction_list = () => { ... const [maindata, setMainData] = useState([]); //setData const [postsPerPage] = useState(6); ... let attList = async (areaCode, cityCode) => { //approach openAPI const url = `...`; try { const {data: res} = await axios.get(url) const list = res.response.body.items.item; console.log("rendering!") setMainData(list); } catch (err) { console.log(err); } } ... attList(1, 1).then(data => {console.log("then");}) //make maindata const currentPosts = (tmp) => { //slice data return tmp.slice(indexOfFirst, indexOfLast); } ... return ( <div> ... <Item rlist={currentPosts(maindata)} moveTo={moveTo} area={area} city={"강남"}></Item> </div> ); }; export default Attraction_list; La función attList trae datos de openAPI. La función currentPosts se ejecuta cuando el componente Item se está representando, devuelve una lista dividida.
Creo que ejecutaron solo una vez,
Resultado: demasiado renderizado en este programa. La función attList y la función currentPost ejecutaron demasiadas veces. no sé por qué
¿Por qué volver a renderizar tanto?
Debe llamar a la función attList dentro de un enlace useEffect, de lo contrario, se llamará en cada renderización del componente.
React.useEffect(()=>{ attList(1, 1) },[])Cuando usted llama
setMainData(list);dentro de su función attList, reaccionar volverá a representar su componente ya que hay un cambio de estado. Esto luego ejecutará su función attList nuevamente, que es lo que está causando el bucle.
Para evitar este comportamiento, puede usar el gancho de reacción useEffect para llamar a la función attList una vez en el primer procesamiento y solo en el primer procesamiento.
Ha realizado un bucle infinito porque attList ejecutará setMainData , que luego volverá a representar el componente y, por lo tanto, ejecutará attList nuevamente.
Esta es la razón por la que debe usar el gancho useEffect , para asegurarse de que attList solo se ejecute cuando usted lo desee. Si hace lo que se muestra arriba, solo sucederá cuando el componente esté montado.