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

360
Visualizações
A component is changing the uncontrolled checked state of SwitchBase to be controlled. Elements should not switch from uncontrolled to controlled

I have a MUI checkbox:

<Checkbox
    checked={rowValues[row.id]}
    onChange={() => {
                       const temp = { ...rowValues, [row.id]: !rowValues[row.id] };
                       setRowValues(temp);
              }}
    inputProps={{ 'aria-label': 'controlled' }}
/>

and there is a select all button

<Button
    onClick={async () => {
                            isAllSelected = !isAllSelected;
                            const tmp = await setAllValues(isAllSelected);
                            setRowValues(tmp);
                          }}
    size="small"
    variant="contained"
>
{isAllSelected ? 'Unselect All' : 'Select All'}
</Button>

Both of these make use of the rowValues whoose structure looks like this:

{
625fd0bc4163c339b4235286: true
627df6084067debf4de42287: true
629a481d848843b1baaf7945: true
6260feb706684d04a43da863: true
62809135dbf57c3ee8d7efd4: true
}

Code related to default value and initialization:

const [rowValues, setRowValues] = useState([]);
    let temp = [];
    async function setAllValues(value) {
        await stableSort(rows, getComparator(order, orderBy))
            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
            .forEach((row) => {
                temp = { ...temp, [row.id]: value };
            });
        console.log('| temp', temp);
        return temp;
    }
    React.useEffect(() => {
        setAllValues(false).then(setRowValues);
    }, []);

When i click the select all button, all the values for the corresponding ID's get changed to true. Now for the checked prop in the checkbox, Im setting it to the value for the corresponding ID(either true or false). Instead i got an error:

index.js:1 Material-UI: A component is changing the uncontrolled checked state of SwitchBase to be controlled. Elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled SwitchBase element for the lifetime of the component. The nature of the state is determined during the first render. It's considered controlled if the value is not undefined.

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

i think this happened because of the inital state value, try to change initial value of all checkboxes to false instead undefined then i think it will be Ok.

about 4 years ago · Juan Pablo Isaza Relatório

0

That happens because your initial value is undefined/null. Use '' instead, that should solve the problem

about 4 years ago · Juan Pablo Isaza Relatório
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