Редактировать форму, которая предварительно заполнена данными API - React
Я создаю форму, которая предварительно заполняется результатами запроса axios get к API-интерфейсу nodejs, который возвращает массив (хранящийся в MySQL). Я задал этот вопрос вчера, реализовал предоставленное решение, и оно сработало. На следующий день я тщательно протестировал его, и оказалось, что при отправке были переданы только отредактированные поля, а не значения из неотредактированных полей.
Я могу получить данные для отображения в форме, но я не могу редактировать форму. Идея состоит в том, чтобы это была форма «редактирования пользователя». Я подозреваю, что проблема в части onChange поля ввода.
Доступ к форме осуществляется из таблицы, которая также сопоставляется с результатами запроса на получение. При нажатии кнопки редактирования идентификатор пользователя из строки таблицы передается в форму редактирования через useNavigate и useLocation (при необходимости я могу добавить эту часть кода).
Бэкенд
Вот контроллер API, который запрашивает базу данных MySQL, а затем отправляет во внешний интерфейс:
export const edit = async (req, res) => {
db.query(
"SELECT * FROM userIndex WHERE userID = ?",
[req.params.userID],
(err, rows) => {
if (!err) {
res.send(rows);
} else {
console.info(err).res.send({ alert: err });
}
}
);
};
Вот пример результата запроса выше:
[
{
"userID": 143,
"firstName": "Kenan",
"lastName": "Erasmus",
"role": "student",
"email": "[email protected]",
"password": "$2b$12$v3s0D6cNkGwM3/IWXPdv..TRfRZLmDNuZBfrWlUCt4vKnyRi75jWe",
"createdAt": "06/10/2022, 13:56:51",
"updatedAt": "07/10/2022, 19:45:46",
"lastLogin": null
}
]
Внешний интерфейс
Вот часть кода, которая выполняет запрос к API:
useEffect(() => {
const config = {
headers: { "x-auth-token": token },
};
const fetchData = async () => {
const results = await api.get("/users/edituser/" + userID, config);
setRows(results.data);
setFirstName(rows.firstName)
};
fetchData();
}, [setRows, userID, token]);
Состояние для «строк» (установлено в ответе API):
const [rows, setRows] = useState([]);
const [firstName, setFirstName] = useState("");
И, наконец, пример поля ввода:
<input
type = "text"
className = "form-control"
id = "inputEmail4"
placeholder = "First Name"
name = "firstName"
value = {firstName}
onChange = {(e) => setFirstName(e.target.value)}
></input>
Я включил только ввод «firstName» в качестве примера. Всего в этой форме около 6 полей.
Буду очень признателен за любую помощь в этом. Дайте мне знать, если я могу предоставить больше кода.
Я реализую и скоро свяжусь с вами @DeanVanGreunen
Эта реализация дает мне «rows.map не является функцией». Таким образом, состояние пусто, а не содержит данные ответа API @DeanVanGreunen
Ответы 1
Нашел обходной путь, который мне кажется вполне логичным. Я инициализировал новые пустые состояния для каждого из полей ввода.
const [firstName, setFirstName] = useState("");
Затем сопоставили форму с «строками» и установили для каждого значения поля соответствующее состояние (как показано в useEffect ниже).
Использование внешнего интерфейсаЭффект:
useEffect(() => {
const config = {
headers: { "x-auth-token": token },
};
const fetchData = async () => {
const results = await api.get("/users/edituser/" + userID, config);
setRows(results.data);
setFirstName(results.data[0].firstName);
setLastName(results.data[0].lastName);
setEmail(results.data[0].email);
setPassword(results.data[0].password);
setRole(results.data[0].role);
};
fetchData();
}, [setRows, userID, token]);
Пример поля ввода:
<input
type = "text"
className = "form-control"
id = "inputEmail4"
placeholder = "First Name"
name = "firstName"
value = {firstName}
onChange = {(e) => setFirstName(e.target.value)}
></input>
Делая это таким образом, форма отображается через «строки», а затем каждое поле ввода сразу же получает новое состояние после ввода.
Я знаю, что это некрасиво, но это эффективно. Я новичок в кодировании, поэтому еще не знаю всех тонкостей React, но это решение работает для меня. Надеюсь, это поможет любому, кто ищет решение той же проблемы!
Отвечает ли это на ваш вопрос? Форма React не обновляет состояние при изменении