data.title и data.description не успевают дойти к useForm defaultValues,понятно почему, но как исправить не знаю
import { IChangeTaskReq, ICreateTaskReq, useChangeTaskMutation, useGetTaskByIdQuery } from '@diary-app/shared'
import { Backdrop, Box, Dialog, DialogContent, TextField, useTheme } from '@mui/material'
import React, { useState } from 'react'
import { Controller, SubmitHandler, useForm } from 'react-hook-form'
import { useNavigate, useParams } from 'react-router-dom'
import { RootSxProps } from './styles'
import { send } from 'process'
export const TaskEditPage = () => {
const { id } = useParams()
const { data } = useGetTaskByIdQuery(id)
const theme = useTheme()
const navigate = useNavigate()
const [changeTask] = useChangeTaskMutation()
const { control, handleSubmit, reset } = useForm<ICreateTaskReq>({
defaultValues: {
title: data?.title,
description: data?.description
}
})
const onSubmit: SubmitHandler<ICreateTaskReq> = async (data) => {
const reqData = {
taskId: id,
taskData: data
} as IChangeTaskReq
navigate('/')
}
return (
<Dialog
open={true}
onClose={ () => handleSubmit(onSubmit) }
>
<DialogContent>
<Controller
control={ control }
name='title'
render={({ field }) => (
<TextField
color='secondary'
autoComplete='false'
fullWidth
multiline
onChange={(e) => field.onChange(e)}
value= { field.value }
/>
)}
/>
<Controller
control={ control }
name='description'
render={({ field }) => (
<TextField
color='secondary'
autoComplete='false'
fullWidth
multiline
onChange={(e) => field.onChange(e)}
value= { field.value }
/>
)}
/>
</DialogContent>
</Dialog>
)
}
export default TaskEditPage
import { IChangeTaskReq, ICreateTaskReq, ITask, IToken, IUser, IUserReq } from "../../types/types";
import { authApi } from "./auth-api";
export const authApiSlice = authApi.injectEndpoints({
endpoints: builder => ({
register: builder.mutation<IUser, IUserReq>({
query: (body) => ({
url: `auth/register`,
method: 'POST',
body
})
}),
login: builder.mutation<IToken, IUserReq>({
query: (body) => ({
url: `/auth/login`,
method: 'POST',
body
}),
invalidatesTags: ['Token', 'Tasks']
}),
refreshToken: builder.mutation<IToken, void>({
query: () => `auth/refresh`,
invalidatesTags: ['Token']
}),
fetchUser: builder.query<IUser, void>({
query: () => `auth/profile`,
providesTags: ['Token']
}),
logout: builder.mutation<void, void>({
query: () => `auth/logout`
}),
getTasks: builder.query<ITask[], void>({
query: () => `task`,
providesTags: (result, error, arg) =>
result
? [...result.map(({ id }) => ({ type: 'Tasks' as const, id })), 'Tasks']
: ['Tasks'],
}),
createTask: builder.mutation<ITask, ICreateTaskReq>({
query: (body) => ({
url: `task/create`,
method: 'Post',
body: body
}),
invalidatesTags: ['Tasks']
}),
deleteTask: builder.mutation<any, {taskId: string}>({
query: (body) => ({
url: `task`,
method: 'DELETE',
body
}),
invalidatesTags: ['Tasks']
}),
getTaskById: builder.query<ITask, string | undefined>({
query: (taskId) => ({
url: `task/${taskId}`,
method: 'GET'
})
}),
changeTask: builder.mutation<ITask, IChangeTaskReq>({
query: (data) => ({
url: `task/${data.taskId}/change`,
method: 'PUT',
body: data.taskData
}),
invalidatesTags: (result, error, arg) => [{ type: 'Tasks', id: arg.taskId }],
})
})
})
export const { useLoginMutation, useRegisterMutation, useFetchUserQuery, useRefreshTokenMutation, useLogoutMutation, useGetTasksQuery, useCreateTaskMutation, useDeleteTaskMutation, useGetTaskByIdQuery, useChangeTaskMutation } = authApiSlice