Как использовать состояние внутри функции, вызываемой onSubmit? - PullRequest
Новая
       6

Как использовать состояние внутри функции, вызываемой onSubmit?

0 голосов
/ 02 января 2019

У меня проблема с использованием состояния внутри функции, которая вызывается onSubmit компонента Form в форме избыточности.

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

Я пытался использовать событие click для обработки отправки, и все это отлично работает.

Передача состояния в качестве параметра не работает.например, 

<Form onSubmit={() => submit(currentTab, tabs.length)}>
  ...
</Form>

он по-прежнему использует состояние по умолчанию, равное 0.

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

Проблема в том, что состояние внутри функции не соответствует текущему состоянию, когда происходит событие отправки. 

const [tabs, setTabs] = useState([])
const [currentTab, setCurrentTab] = useState(0)
console.log('outside', tabs.length); // outside 2
const submit = () => { 
  console.log('inside', tabs.length); /* inside 0  <- still the 
  default value provided to useState */
  if (tabs.length == currentTab + 1) {
    props.onSubmit();
  } else {
    handleNextTab();
  }
};
<Form onSubmit={submit}>
  ...
</Form>

Поскольку вкладки динамические и могут различаться по длине, я хочу иметь возможностьсравните tabs.length с currentTab, чтобы узнать, находится ли пользователь на последней вкладке для запуска различных действий в зависимости от результата.

Ответы [ 2 ]

0 голосов
/ 02 января 2019

Вам необходимо передать вкладки в качестве параметра функции отправки.

0 голосов
/ 02 января 2019

Если состояние истинно во время рендеринга Form, вы могли бы каррировать обработчик onSubmit и передать состояние обработчику.

Я думаю: 

<Form onSubmit={handleSubmit(tabs, currentTab)}>
  ...
</Form>

А: 

const handleSubmit = (tabs, currentTab) => {
    return () => {
        // Do something with `tabs`, and `currentTab` here
    };
};

См. Также (связанные): https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback

...