Estou recebendo dois problemas estranhos, tenho este formulário:
import { SelectOption } from "../../../component/select/SelectOption"
const Form = () => {
const [selectState, setSelectState] = useState(0);
const [selectCity, setSelectCity] = useState(0);
const [listStates, setListStates] = useState([{}]);
const [listCity, setListCity] = useState([{}]);
const loadListStates = () => {
axios.request({
/*configuration request with token*/
})
.then((response) => {
const newStruct = response.data.map((e)=>{ return { 'id': e.id, 'name': e.fullName }});
setListStates( newStruct )
})
.catch((error) => {
});
}
const loadListCity = () => {
axios.request({
/*configuration request with token*/
})
.then((response) => {
const newStruct = response.data.map( (e) => {return { 'id': e.id, 'name': e.fullName }} );
setListCity( newStruct );
})
.catch((error) => {
});
}
loadListStates();
loadListCity();
return(
<Div>
<SelectDiv>
<SelectOption
key={1}
value={selectState}
setValue={setSelectState}
text="Select one"
list={listStates}
borderRadious="10px"
width="20rem"
/>
<SelectOption
key={1}
value={selectCity}
setValue={setSelectCity}
text="Select one"
list={listCity}
borderRadious="10px"
width="20rem"
/>
</SelectDiv>
</Div>
)
}
export default Form;
e meu compent select é:
import { useState } from 'react';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import { Colors } from '../../const/colors';
import { Fonts } from "../../const/fonts";
export const SelectOption = ({ key, value, setValue, text, list, width, borderRadious}) => {
const handleChange = (event) => {
setValue(event.target.value);
};
return(
<FormControl>
<Select
key={key}
value={value}
onChange={(e)=>handleChange(e)}
displayEmpty
inputProps={{ 'aria-label': 'Without label' }}
defaultValue=""
style={{
textDecoration: 'none',
width: width? width : '200px',
height: '40px',
top: '0.31px',
borderRadius: borderRadious? borderRadious : '5px',
border: '0',
padding: '11px, 20px, 11px, 20px',
backgroundColor: Colors.backgroundElement,
font: Fonts.Poppins
}}
MenuProps={{
PaperProps: {
sx: {
"& .MuiMenuItem-root:hover": {
opacity: 1
},
"& .MuiMenuItem-root.Mui-selected": {
opacity: 1
},
"& .MuiMenuItem-root": {
backgroundColor: Colors.backgroundElement,
font: Fonts.Poppins,
opacity: 0.5
},
"& .css-6hp17o-MuiList-root-MuiMenu-list":{
backgroundColor: Colors.backgroundElement
}
}
}
}}
>
<MenuItem defaultValue="" key={0}>
{text}
</MenuItem>
{
list?.map((value)=>{
return(
<MenuItem
key={value.id}
value={value.id}
>
{value.name}
</MenuItem>
)
})
}
</Select>
</FormControl>
)
}
então, o erro que estou recebendo é quando vou verificar o console dos meus devtools do Chrome, estou recebendo um loop infinito, por quê?
Eu estava verificando, então removi Form
o componente SelectOption
e o loop infinito não apareceu mais no console.
então, oque há de errado??
Cada vez
<Form>
que é renderizado, ele faz isso:Essas operações atualizam internamente o estado:
A atualização do estado aciona uma nova renderização. Nesse caso, a nova renderização invoca essas operações. Qual estado de atualização. O que aciona uma nova renderização. O que invoca essas operações. Etc etc.
Nunca atualize o estado na renderização de um componente. Suspeito que você só deseja executar essas operações quando o componente for carregado pela primeira vez , o que pode ser feito com
useEffect()
:Observe a matriz vazia no final. Uma matriz de dependência vazia informa
useEffect
para executar apenas uma vez quando o componente for carregado. Omitir totalmente o array diz para executar em cada renderização (o que você não quer aqui, seria o mesmo problema). Adicionar quaisquer dependências ao array executaria o efeito sempre que uma dessas dependências mudasse entre as renderizações.