0

Estou com uma dúvida no React ao fazer um update de dados de um aluno onde utilizo o useEffect() para buscar os dados do aluno e leva-los até o formulário pelo placeholder={} e em seguida tenho um onChange que pega os dados do input e joga para a função de update dos dados.

Quero que essa função atualize somente os dados inseridos no input e os outros permaneçam iguais aos do placeholder={}, porém já tentei de várias formas e não cheguei a uma conclusão.

Front

export default function EditMyDataStudent() {
    const [students, setStudents] = useState([]);
    const [nameStudent, setNameStudent] = useState('');
    const [studentId, setStudentId] = useState('');
    const [emailStudent, setEmailStudent] = useState('');
    const [whatsappStudent, setWhatsappStudent] = useState('');
    const [studentDateBirth, setStudentDateBirth] = useState('');
    const [nameDadStudent, setNameDadStudent] = useState('');
    const [nameMotherStudent, setNameMotherStudent] = useState('');
    const [numberResponsible, setNumberResponsible] = useState('');
    const [matriculation, setMatriculation] = useState('');
    const [studentDateRegister, setStudentDateRegister] = useState('');

    const history = useHistory();

    const studentCpf = localStorage.getItem('studentCpf');
    const nameS = localStorage.getItem('nameStudent');


    useEffect(() => {
        api.get('students', {
            headers: {
                Authorization: studentCpf,
            }
        }).then(response => {
            setStudents(response.data);
        })
    }, [studentCpf]);

    function handleLogout() {
        localStorage.clear();

        history.push('/sessions');
    }

    function handleCancel() {
        localStorage.setItem('studentCpf', studentCpf);
        localStorage.setItem('nameStudent', nameS);

        history.go(0);
    }

    async function handleUpdate(e) {
        
        const data = {
            nameStudent,
            emailStudent,
            whatsappStudent,
            studentDateBirth,
            nameDadStudent,
            nameMotherStudent,
            numberResponsible,
            matriculation,
            studentDateRegister
        };

        
        try {
            await api.put(`students/${studentCpf}`, data);


            history.push('/mydatastudent');
        } catch (err) {
            alert('Erro no cadastro, tente novamente.');
        }
    }

    return (
        <div className="profile-container">
            <header>
                <img src={schoolIso} alt="student Isotipo" />
                <span>Bem vindo, {nameS}</span>

                <Link className="button" to="/">Agenda</Link>
                <button onClick={handleLogout} type="button">
                    <FiPower size={18} color="#E02041" />
                </button>
            </header>

            <Tabs className="menu" value={false}>
                <Tab className="tab" label="Meus Dados" />
                <Tab className="tab" label="Grade de Aulas" />
                <Tab className="tab" label="Grade de Professores" />
                <Tab className="tab" label="Trabalhos" />
                <Tab className="tab" label="Avaliações" />
            </Tabs>

            <div className="title">
                <h1>Meus Dados</h1>
            </div>

            <ul>
                {students.map(student => (
                    <li key={student.studentCpf} >

                        <strong>Nome:</strong>
                        <input
                            placeholder={student.nameStudent}
                            value={nameStudent}
                            onChange={e => setNameStudent(e.target.value)}
                        />

                        <strong >CPF:</strong>
                        <input
                            placeholder={student.studentCpf}
                            value={studentId}
                            onChange={e => setStudentId(e.target.value)}
                        />


                        <strong>Email:</strong>
                        <input
                            placeholder={student.emailStudent}
                            value={emailStudent}
                            onChange={e => setEmailStudent(e.target.value)}
                        />


                        <strong>Whatsapp:</strong>
                        <input
                            placeholder={student.whatsappStudent}
                            value={whatsappStudent}
                            onChange={e => setWhatsappStudent(e.target.value)}
                        />

                        <strong>Data Nascimento:</strong>
                        <input
                            placeholder={student.studentDateBirth}
                            value={studentDateBirth}
                            onChange={e => setStudentDateBirth(e.target.value)}
                        />


                        <strong>Nome do Pai:</strong>
                        <input
                            placeholder={student.nameDadStudent}
                            value={nameDadStudent}
                            onChange={e => setNameDadStudent(e.target.value)}
                        />


                        <strong>Nome da Mãe:</strong>
                        <input
                            placeholder={student.nameMotherStudent}
                            value={nameMotherStudent}
                            onChange={e => setNameMotherStudent(e.target.value)}
                        />


                        <strong>Numero do Responsável:</strong>
                        <input
                            placeholder={student.numberResponsible}
                            value={numberResponsible}
                            onChange={e => setNumberResponsible(e.target.value)}
                        />


                        <strong>Matrícula:</strong>
                        <input
                            placeholder={student.matriculation}
                            value={matriculation}
                            onChange={e => setMatriculation(e.target.value)}
                        />


                        <strong>Data de Registro:</strong>
                        <input
                            placeholder={student.studentDateRegister}
                            value={studentDateRegister}
                            onChange={e => setStudentDateRegister(e.target.value)}
                        />


                        <button type="button" style={{ right: 40 }} onClick={e => handleUpdate(student, e)} >
                            <BiCheck size={20} color="#a8a8b3" />
                        </button>
                        <button type="button" style={{ right: 60 }} onClick={handleCancel} >
                            <BiX size={20} color="#a8a8b3" />
                        </button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

Back

async update(request, response) {
    console.log('aq')
    const { studentCpf } = request.params;
    const { nameStudent,
        emailStudent,
        whatsappStudent,
        studentDateBirth,
        nameDadStudent,
        nameMotherStudent,
        numberResponsible,
        matriculation,
        studentDateRegister } = request.body;

    const student = await connection('students')
        .where('studentCpf', studentCpf)
        .update({
            'nameStudent': nameStudent,
            'emailStudent': emailStudent,
            'whatsappStudent': whatsappStudent,
            'studentDateBirth' :studentDateBirth,
            'nameDadStudent' :nameDadStudent,
            'nameMotherStudent': nameMotherStudent,
            'numberResponsible': numberResponsible,
            'matriculation' :matriculation,
            'studentDateRegister' :studentDateRegister
        })
    

    if(student.studentCpf =! studentCpf){
        return response.status(401).json({ error: 'Operation not permitted' })
    }

    return response.status(204).send();
}
5
  • Você recebe uma lista de Students correto e carrega isso tudo na tela e utiliza outro estado para gravar aquela modificação então está errado, porque deveria mudar as posições de Students, acho que é isso que deseja fazer? (acho) não entendi bem porque existe essa incoerência no seu formulário.
    – novic
    4/11/2020 às 18:54
  • @novic no placeholder() eu faço a busca dos dados existentes. E nos useState() eu utilizo para gravar as modificações. Ou seja um aluno entra na área editarDados e consegue ver seus dados já gravados em um placeholder() assim como também tem a opção de atualiza-los. 4/11/2020 às 19:21
  • se está alterando uma lista correto?
    – novic
    4/11/2020 às 19:27
  • sim! É uma página de update. 5/11/2020 às 11:39
  • não precisa de todas as variáveis que você criou só pela lista você consegue alterar
    – novic
    5/11/2020 às 15:48

1 Resposta 1

0

Está recebendo uma lista de valores e pelo visto criou um variável de estado único para tudo, esse é o problema, quando se tem uma lista de valores tem que alterar a posição de cada item da lista de forma separada, mas, como?

Exemplo mínimo para alteração de itens de uma lista:

function App() {  
  const [items, setItems] = React.useState([
    {"id": 1, "name": "item 1", "status": true},
    {"id": 2, "name": "item 2", "status": true},
    {"id": 3, "name": "item 3", "status": false},
  ]); 
  const handleChange = (e, id) => {    
  
    const value = e.target.type === 'checkbox' 
      ? e.target.checked 
      : e.target.value;
    const { name } = e.target;    
      
    setItems(state => [
      ...state.map(item => {
        if (item.id === id) {        
          return { ...item, [name]: value };
        }
        return item;
      })
    ]);
  }
  return (
    <div>
      {items.map((item, indice) => (
        <div key={indice}>
          <div>{item.id}</div>
          <div>
            <input 
              name="name"
              value={item.name} 
              onChange={e => handleChange(e, item.id)}
            />
            <input 
              name="status"
              type="checkbox"
              onChange={e => handleChange(e, item.id)}
              checked={item.status}
            />
          </div>
        </div>
      ))}
      <pre>{JSON.stringify(items, null, '\t')}</pre>
    </div>
  )
}

ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

verifique que ao digitar o valor na caixa o mesmo vai alterar a chave que representa aquele conjunto de informações, e como tu fez não é exatamente como deveria ser feito, também acrescente dois tipos de campo para entender que cada campo pode ter a sua peculiaridade, mas, a diferença são com esses dois elementos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .