Редактирование данных пользователя React

189
04 июня 2022, 02:00

Помогите с кейсом,нужно сделать post запрос получить данные пользователя fio,inn,password и записать их в стейт потом отобразить в input и что бы администратор мог изменить значение в инпутах и при submit отправился patch запрос.

данные у меня отображаются в инпутах, но при вводе символа происходит ререндер и сбрасывается фокус как убрать ререндер и что бы механика показать значения со стейта и отредактировать его в инпутах ?

import React, { useState, useEffect } from "react";
import clsx from "clsx";
import axios from "axios";
import { useHistory } from "react-router-dom";
const EditCurentUser = props => {
  const [formData, setFormData] = React.useState({
    //example data 
    fio: "Ivan",
    inn: "3414125",
    password: "qwerty221",
  });
 
  
  const id = props.match.params.id;
   useEffect(() => {
       .get(
         `https://example.com`
       )
       .then(result => setFormData(result.data));
     console.log(users);
   }, []);
  const loginHandler = e => {
    e.preventDefault();
    //patch request
  };

  const onChangeHandler = e => {
    setFormData({ fio: e.target.value });
  return (

        <main className={classes.content}>
          <div className={classes.appBarSpacer} />
          <Container maxWidth="lg" className={classes.container}>
            <Grid container spacing={3}>
              <Grid item xs={6}>
                <Paper className={fixedHeightPaper}>
                  <form className={classes.form} onSubmit={loginHandler}>
                    <Typography component="h1" variant="h6">
                      Изменить данные пациента
                    </Typography>
                    {console.log(users)}
                    <TextField
                      onChange={e =>
                        setFormData({ ...formData, fio: e.target.value })
                      }
                      variant="outlined"
                      margin="normal"
                      required
                      fullWidth
                      name="fio"
                      label="Фамилия Имя Отчество"
                      type="text"
                      id="fio"
                      autoComplete="current-fio"
                      key={`${Math.floor(Math.random() * 1000)}-min`}
                      defaultValue={formData.fio}
                    />
                    <TextField
                      onChange={e =>
                        setFormData({ ...formData, inn: e.target.value })
                      }
                      key={`${Math.floor(Math.random() * 1000)}-min`}
                      variant="outlined"
                      margin="normal"
                      required
                      fullWidth
                      name="inn"
                      label="Идентификационный номер"
                      type="text"
                      id="inn"
                      autoComplete="current-inn"
                    />
                    <TextField
                      onChange={onChangeHandler}
                      defaultValue={formData.fio}
                      variant="outlined"
                      margin="normal"
                      required
                      fullWidth
                      name="password"
                      label="Пароль"
                      type="text"
                      id="password"
                      autoComplete="current-password"
                      key={`${Math.floor(Math.random() * 1000)}-min`}
                    />
                    <Button
                      type="submit"
                      fullWidth
                      variant="contained"
                      color="primary"
                      className={classes.submit}
                    >
                      Внести изменения
                    </Button>
                  </form>
                </Paper>
              </Grid>
            </Grid>
            <Box pt={4}>
              <Copyright />
            </Box>
          </Container>
        </main>
      </div>
    </ThemeProvider>
  );
};
export default EditCurentUser;
Answer 1

Немного затупил,вот так решил .

        const [formData, setFormData] = React.useState({
        fio: "Ivan Petrov Dashfa",
        inn: "3414125",
        password: "qwerty221",
      });
  const onChangeHandler = e => {
    setFormData({ fio: e.target.value });
  };
                      <TextField
                      value={formData.fio}
                      onChange={onChangeHandler}
                      variant="outlined"
                      margin="normal"
                      required
                      fullWidth
                      name="fio"
                      label="Фамилия Имя Отчество"
                      type="text"
                      id="fio"
                      autoComplete="current-fio"
                      
                    />
READ ALSO
Хочу переделать скрипт добавляющий определенные символы

Хочу переделать скрипт добавляющий определенные символы

Делаю скрипт на jquery, который должен добавлять к определенному символу/словосочетанию/цифрам также определенные символы/словосочетания/цифрыНапример...

184
React проблемы с модальным окном и массивом

React проблемы с модальным окном и массивом

Я использую состояние все работает нормально, за исключением модального окнаВнутри состояния, я использую объекты, которые нормально отображаются...

154
Разбить 1 массив на 2

Разбить 1 массив на 2

Помогите разбить массив на 2 массива этот:

188
В чем может быть ошибка при деплое Spring Boot приложения на vps?

В чем может быть ошибка при деплое Spring Boot приложения на vps?

Гитхаб проекта:https://githubcom/DeadSidert/telegramBotMoney Первый раз деплою приложения

287