Передать переменную в форму действия сервера NextJs 14

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

это работает:

//клиентский компонент

 <form action = {test}
      >

//действие сервера

export const test = async (formData: FormData) => {

  console.info(formData);
}

Но это не

//клиентский компонент

const companyID = 1;
return (
 <form action = {test(companyID)}
      >
...

)

//действие сервера

export const test = async (formData: FormData, companyID) => {

  console.info(formData, companyID);
}

next.js

04.06.2024 18:37

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Да, у вас есть несколько вариантов.

Измените это <form action = {test(companyID)} на <form action = {(event) => test(event, companyID)} — возможно, вам придется проверить там типы, я думаю, что событие будет SubmitEvent или FormEvent, а не FormData

На самом деле вы вызываете функцию test(companyID) во время рендеринга без каких-либо действий. Вот несколько дополнительных документов по этому вопросу, если вам интересно: https://react.dev/learn/responding-to-events#:~:text=Pitfall

Чаще всего вы увидите следующее, поскольку после ответа от действия сервера (показывающего успех, неудачу и т. д.) вы можете выполнить другую логику:

...

const companyID = 1;

async function submitHandler(formData){

  console.info(formData, companyID)
  const serverResponse = await serverAction(formData, companyID)

  //Do something with the server response
}

...

return ( 
    <form action = {submitHandler}>
      <input type = "text" placeholder = "Something..."/>
    </form>
  )

Я думаю, что вышеизложенное можно улучшить. Лично я не сторонник использования переменных, которые не являются параметрами функции напрямую. Это делает функции нечистыми. У вас есть третий вариант установки скрытого поля CompanyId со значением, и тогда все это будет в formData. Я не знаю, откуда в вашем коде этот идентификатор компании, но предполагаю, что это динамический маршрут.

export default Page({params}){

const {companyID} = params;

async function submitHandler(formData){
  //Now formData has companyID directly in it.

  const serverResponse = await serverAction(formData)

  //Do something with the server response
}

return ( 
    <form action = {submitHandler}>
      <input type = "text" placeholder = "Something..."/>
      <input type = "hidden" value = {companyID} name = "companyID"/>
    </form>
  )

04.06.2024 20:28

Я думаю, это шаблон действий сервера по умолчанию. Это определено в документации nextjs. https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#examples

05.06.2024 03:23