如何在由 onSubmit 调用的函数内使用状态？

Question

I'm having an issue using state inside a function that is called by redux-form's Form component's onSubmit.

I need to access a given piece of state, tabs and currentTab. The first is an array of tabs, the second is an indicator to which tab the user currently is.

I've tried using a click event to handle the submission and it all works fine.

Passing state as a parameter does not work. eg

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

it still uses the default state of 0.

I've also tried using the handleSubmit prop given to decorated components but got no luck with that.

The issue is that the state inside the function is not up to date with the actual state when the submit event occurs.

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>

Since the tabs are dynamic and can vary in length i want to be able to compare the tabs.length to the currentTab to know whether or not the user is in the last tab to trigger different actions depending on the result.

Answer 1

If the state is true at the time of rendering the Form , you could curry the onSubmit handler, and pass the state to the handler.

I am thinking:

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

And:

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

See also (related): https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback

Answer 2

您需要将选项卡作为参数传递给您的提交函数。