Tengo varios componentes que tienen un cambio de estado durante su recopilación de datos desde obtener una llamada api, se llaman desde un solo componente y se vuelven a renderizar varias veces. Por favor, ayúdeme a evitar volver a renderizar cuando abra esta página.
const MyData = () => { const [data, setData] = useState(""); const [newData, setNewData] = useState(""); const getData = () => { axios.get("url").then(async function (response) { setData(response); }); }; const getData2 = () => { axios.get("url").then(async function (response) { setNewData(response); }); }; useEffect(() => { getData(); getData2(); }); const NewData = () => { return ( <View> <Text>{data.name}</Text> </View> ); }; const RewData = () => { return ( <View> <Text>{newData.name}</Text> </View> ); }; return ( <View> <NewData /> <RewData /> </View> ); };No proporciona una matriz de dependencia (indefinida) a su useEffect . Si el estado del componente cambia, entonces se volverá a llamar a useEffect , que establece el estado nuevamente, y así sucesivamente.
Puede proporcionar una matriz de dependencia vacía que hará que useEffect se llame solo una vez.
useEffect(() => { getData(); getData2(); }, []);Editar: En respuesta a los comentarios. Puede evitar que el contenido de las pantallas se represente hasta que se hayan obtenido los datos de la siguiente manera.
const MyData = () => { const [data, setData] = useState(); const [newData, setNewData] = useState(); const getData = () => { axios.get("url").then(async function (response) { setData(response); }); }; const getData2 = () => { axios.get("url").then(async function (response) { setNewData(response); }); }; useEffect(() => { getData(); getData2(); }, []); if (!data || !newData) { return null } const NewData = () => { return ( <View> <Text>{data.name}</Text> </View> ); }; const RewData = () => { return ( <View> <Text>{newData.name}</Text> </View> ); }; return ( <View> <NewData /> <RewData /> </View> ); };