Preencher o componente Select somente ao clicar

Front-end
#1

Estou com um projeto que ao entrar no componente ele carrega as informações do modal, pois o modal está com useEffect

useEffect(() => {
    buscarPlantas();
}, []);

Mas quero que esta lista só carregue quando clique no componente.

Consegui colocando no onFocus={buscarPlantas} do componente. Só que ele não carrega a lista no componente.

const [plantas, setPantas] = useState([]);

const buscarPlantas= () => {
    const plants = [];
    getBuscarPlantas().then((response) => {
      response.data.data.map(plant => (
        plants.push(plant.attributes)
      ))
    })
    setPlantas(plants);
  }

<Select
                value={age}
                onChange={handleChange}
                displayEmpty
                className={classes.selectEmpty}
                inputProps={{ "aria-label": "Without label" }}
                onFocus={buscarPlantas}
              >
                <MenuItem value="">
                  <em className={classes.selectPlaceholder}>
                    Selecionar plantas
                 </em>
                </MenuItem>
                {
                  plantas.map(planta => {
                    return (
                      <MenuItem key={planta} value={planta}>{planta}</MenuItem>
                    )
                  })
                }
              </Select>

O que pode estar falando ?

#2

remover o useEffect e tenta usar no onClick, mas essa sua regra nao faz sentido. o correto eh colocar no useEffect e o compotente ja ser preenchido.

1 curtida
#3

Tudo bem.

Mas pensa no seguinte,

Tenho uma tela de pesquisa de produtos, em que o usuário entra. Nela tem a ação de cadastrar um novo produto que é um modal. Que neste modal tem uma lista de categorias. Acontece que esta lista é sempre carregada indepedende se o usuário aciona o botão de novo ou não. Entendeu ?

OnClick, não funciona, já testei

#4

Entendeu ?

#5

mas qual é o problema da lista sempre ser carregada?

#6

Tempo de resposta.

A idéia não é só carregar o que for utilizar ?

Se eu não vou utilizar esta lista neste momento, para quer carregar. Só vou utilizar ele se eu clicar no para abrir o modal.

#7

se voce estiver usando modal, com bootstrap, voce vai ter que fazer isso no evento do modal. onShow e onHide ou onExit.