Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

132
Visualizações
React Select Crashes on Page Refresh

I have used React-Select to make a search bar for my project. The search bar should have three options for advantages and three for disadvantages that can be toggled from another component.

This all works as intended until I make a selection and then click refresh page and I get the following error

enter image description here

Here is a Gist of the component in question

https://gist.github.com/Uken81/2dc41c937e587c0b9f8b595426d1573c

Here is the code I believe is causing the error

 useEffect(() => {
    const createSearchOptions = () => {
      let adsArr = AdvantagesArray.map((opt) => ({
        label: opt.title,
        value: opt,
        category: opt.type
      }));
      let disadsArr = DisadvantagesArray.map((opt) => ({
        label: opt.title,
        value: opt,
        category: opt.type
      }));
      setAdvantageOptions(adsArr);
      setDisadvantageOptions(disadsArr);
    };
    createSearchOptions();
  }, []);

const formatOptionLabel = ({ label, category }) => (
    <div style={category === 'advantage' ? { color: 'seagreen' } : { color: 'brown' }}>{label}</div>
  );

 <div className="toggle-and-search">
        <ToggleAdvantageDisadvantage />
        <Select
          className="searchBar"
          options={isChoosingAdvantages ? advantageOptions : disadvantageOptions}
          value={selectInput}
          isMulti
          onChange={handleChange}
          formatOptionLabel={formatOptionLabel}
        />
      </div>

After some research I tried wrapping the label variable found on line 73 in double curly braces like this {{label}}. When I tested this I got a different error as soon as I made a selection on the search bar

enter image description here

I believe this must mean that it is the label variable that is causing the error but im not sure how I can stop the error if the user refreshes while maintaining the functionality of my search bar. I have tried just extracting the stringed titles to an array and using that but select no longer works properly. I have also tried other ways of using arrays here but all have broken my search bar.

If anyone can help me fix this bug I would be very grateful and if anyone can explain to me exactly what is going on that would be wonderful.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda