1
resposta

[Dúvida] Dificuldade com a didatica!

Não consegui entender bem o que está sendo ensinado no curso, estou realizando exatamente igual ao professor, porém está apresentando erros.

Segue o código.

import { Button } from "@material-ui/core";
import { Container, Titulo, InputContainer } from "./styles";
import { Input, InputLabel, InputAdornment } from "@material-ui/core";
import { useHistory } from "react-router-dom";
import { UsuarioContext } from "common/context/Usuario";

function Login() {
  const history = useHistory();
  return (
    <Container>
      <UsuarioContext.Consumer>
        {({nome, setNome, saldo, setSaldo}) => (
          <>
            <Titulo>Insira o seu nome</Titulo>
            <InputContainer>
              <InputLabel>Nome</InputLabel>
              <Input
                value={nome}
                onChange={(evento) => setNome(evento.target.value)}
                type="text"
              />
            </InputContainer>
            <InputContainer>
              <InputLabel>Saldo</InputLabel>
              <Input
                type="number"
                value={saldo}
                onChange={(evento) => setSaldo(evento.target.value)}
                startAdornment={
                  <InputAdornment position="start">R$</InputAdornment>
                }
              />
            </InputContainer>
            <Button
              variant="contained"
              color="primary"
              onClick={() => history.push("/feira")}
            >
              Avançar
            </Button>
          </>
        )}
      </UsuarioContext.Consumer>
    </Container>
  );
}

export default Login;

Erros

TypeError: Cannot destructure property 'nome' of '_ref' as it is undefined. children C:/Users/Allan/React/react-context/src/pages/Login/index.js:12 9 | return ( 10 | 11 | <UsuarioContext.Consumer>

12 | {({nome, setNome, saldo, setSaldo}) => ( | ^ 13 | <> 14 | Insira o seu nome 15 | View compiled ▶ 16 stack frames were collapsed. Module. C:/Users/Allan/React/react-context/src/index.js:19 16 | } 17 | }) 18 | 19 | ReactDOM.render( 20 | <React.StrictMode> 21 | 22 | View compiled ./src/index.js http://localhost:3000/static/js/main.chunk.js:773:30 webpack_require C:/Users/Allan/React/react-context/webpack/bootstrap:851 848 | 849 | webpack_require.$Refresh$.init(); 850 | try { 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 852 | } finally { 853 | webpack_require.$Refresh$.cleanup(moduleId); 854 | } View compiled fn C:/Users/Allan/React/react-context/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | } 150 | return webpack_require(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return { View compiled 1 http://localhost:3000/static/js/main.chunk.js:2215:18 webpack_require C:/Users/Allan/React/react-context/webpack/bootstrap:851 848 | 849 | webpack_require.$Refresh$.init(); 850 | try { 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 852 | } finally { 853 | webpack_require.$Refresh$.cleanup(moduleId); 854 | } View compiled checkDeferredModules C:/Users/Allan/React/react-context/webpack/bootstrap:45 42 | } 43 | if(fulfilled) { 44 | deferredModules.splice(i--, 1); 45 | result = webpack_require(webpack_require.s = deferredModule[0]); | ^ 46 | } 47 | } 48 | View compiled Array.webpackJsonpCallback [as push] C:/Users/Allan/React/react-context/webpack/bootstrap:32 29 | deferredModules.push.apply(deferredModules, executeModules || []); 30 | 31 | // run deferred modules when all chunks ready 32 | return checkDeferredModules(); | ^ 33 | }; 34 | function checkDeferredModules() { 35 | var result; View compiled (anonymous function) http://localhost:3000/static/js/main.chunk.js:1:85

1 resposta

Pelo erro, parece que não existe a variável nome que você está passando como parâmetro dentro da arrow function de <UsuarioContext.Consumer />.

Seria necessário você também mostrar o código de seu arquivo routes.js para saber se lá o <UsuarioContext.Provider> foi escrito corretamente e está enviando a variável nome.

Dá uma olhada no gabarito que o instrutor deixou na atividade seguinte: https://cursos.alura.com.br/course/react-context-estados-globais-contextapi/task/96910.