0

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
1

1 ответ 1

0

Самый очевидный вариант попробовать:

{
  defaultValues: {
      title: data?.title ?? '',
      description: data?.description ?? '',
    }
}

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

однако, это будет кустарное решение, для подобных интеракций лучше всего подходит SSR с гидратацией

могу посоветовать изменить структуру компонента на что-то вроде:

export const TaskEditPage = () => {
  const { id } = useParams()
  const { data, isLoading } = useGetTaskByIdQuery(id) 

  return (
    <Dialog open>
      {isLoading ? <Spinner/> : <TaskEditForm {...data}/>
    </Dialog>
}

const TaskEditForm = ({ ...initialData}) => {
  const { control, handleSubmit, reset } =  useForm<ICreateTaskReq>({
    defaultValues: {
      ...initalData
    }
  })
  
  ...
  return ...
}
1
  • это сработало, спасибо.
    – user567057
    Commented 11 апр. в 12:41

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.