mirror of
https://github.com/facebook/react.git
synced 2026-02-23 20:23:02 +00:00
During an MPA form submission, useFormState should only reuse the form
state if same action is passed both times. (We also compare the key
paths.)
We compare the identity of the inner closure function, disregarding the
value of the bound arguments. That way you can pass an inline Server
Action closure:
```js
function FormContainer({maxLength}) {
function submitAction(prevState, formData) {
'use server'
if (formData.get('field').length > maxLength) {
return { errorMsg: 'Too many characters' };
}
// ...
}
return <Form submitAction={submitAction} />
}
```
187 lines
4.2 KiB
JavaScript
187 lines
4.2 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
export type ReactNode =
|
|
| React$Element<any>
|
|
| ReactPortal
|
|
| ReactText
|
|
| ReactFragment
|
|
| ReactProvider<any>
|
|
| ReactConsumer<any>;
|
|
|
|
export type ReactEmpty = null | void | boolean;
|
|
|
|
export type ReactFragment = ReactEmpty | Iterable<React$Node>;
|
|
|
|
export type ReactNodeList = ReactEmpty | React$Node;
|
|
|
|
export type ReactText = string | number;
|
|
|
|
export type ReactProvider<T> = {
|
|
$$typeof: symbol | number,
|
|
type: ReactProviderType<T>,
|
|
key: null | string,
|
|
ref: null,
|
|
props: {
|
|
value: T,
|
|
children?: ReactNodeList,
|
|
...
|
|
},
|
|
...
|
|
};
|
|
|
|
export type ReactProviderType<T> = {
|
|
$$typeof: symbol | number,
|
|
_context: ReactContext<T>,
|
|
...
|
|
};
|
|
|
|
export type ReactConsumer<T> = {
|
|
$$typeof: symbol | number,
|
|
type: ReactContext<T>,
|
|
key: null | string,
|
|
ref: null,
|
|
props: {
|
|
children: (value: T) => ReactNodeList,
|
|
...
|
|
},
|
|
...
|
|
};
|
|
|
|
export type ReactContext<T> = {
|
|
$$typeof: symbol | number,
|
|
Consumer: ReactContext<T>,
|
|
Provider: ReactProviderType<T>,
|
|
_currentValue: T,
|
|
_currentValue2: T,
|
|
_threadCount: number,
|
|
// DEV only
|
|
_currentRenderer?: Object | null,
|
|
_currentRenderer2?: Object | null,
|
|
// This value may be added by application code
|
|
// to improve DEV tooling display names
|
|
displayName?: string,
|
|
|
|
// only used by ServerContext
|
|
_defaultValue: T,
|
|
_globalName: string,
|
|
...
|
|
};
|
|
|
|
export type ServerContextJSONValue =
|
|
| string
|
|
| boolean
|
|
| number
|
|
| null
|
|
| $ReadOnlyArray<ServerContextJSONValue>
|
|
| {+[key: string]: ServerContextJSONValue};
|
|
|
|
export type ReactServerContext<T: any> = ReactContext<T>;
|
|
|
|
export type ReactPortal = {
|
|
$$typeof: symbol | number,
|
|
key: null | string,
|
|
containerInfo: any,
|
|
children: ReactNodeList,
|
|
// TODO: figure out the API for cross-renderer implementation.
|
|
implementation: any,
|
|
...
|
|
};
|
|
|
|
export type RefObject = {
|
|
current: any,
|
|
};
|
|
|
|
export type ReactScope = {
|
|
$$typeof: symbol | number,
|
|
};
|
|
|
|
export type ReactScopeQuery = (
|
|
type: string,
|
|
props: {[string]: mixed, ...},
|
|
instance: mixed,
|
|
) => boolean;
|
|
|
|
export type ReactScopeInstance = {
|
|
DO_NOT_USE_queryAllNodes(ReactScopeQuery): null | Array<Object>,
|
|
DO_NOT_USE_queryFirstNode(ReactScopeQuery): null | Object,
|
|
containsNode(Object): boolean,
|
|
getChildContextValues: <T>(context: ReactContext<T>) => Array<T>,
|
|
};
|
|
|
|
// The subset of a Thenable required by things thrown by Suspense.
|
|
// This doesn't require a value to be passed to either handler.
|
|
export interface Wakeable {
|
|
then(onFulfill: () => mixed, onReject: () => mixed): void | Wakeable;
|
|
}
|
|
|
|
// The subset of a Promise that React APIs rely on. This resolves a value.
|
|
// This doesn't require a return value neither from the handler nor the
|
|
// then function.
|
|
interface ThenableImpl<T> {
|
|
then(
|
|
onFulfill: (value: T) => mixed,
|
|
onReject: (error: mixed) => mixed,
|
|
): void | Wakeable;
|
|
}
|
|
interface UntrackedThenable<T> extends ThenableImpl<T> {
|
|
status?: void;
|
|
}
|
|
|
|
export interface PendingThenable<T> extends ThenableImpl<T> {
|
|
status: 'pending';
|
|
}
|
|
|
|
export interface FulfilledThenable<T> extends ThenableImpl<T> {
|
|
status: 'fulfilled';
|
|
value: T;
|
|
}
|
|
|
|
export interface RejectedThenable<T> extends ThenableImpl<T> {
|
|
status: 'rejected';
|
|
reason: mixed;
|
|
}
|
|
|
|
export type Thenable<T> =
|
|
| UntrackedThenable<T>
|
|
| PendingThenable<T>
|
|
| FulfilledThenable<T>
|
|
| RejectedThenable<T>;
|
|
|
|
export type OffscreenMode =
|
|
| 'hidden'
|
|
| 'unstable-defer-without-hiding'
|
|
| 'visible'
|
|
| 'manual';
|
|
|
|
export type StartTransitionOptions = {
|
|
name?: string,
|
|
};
|
|
|
|
export type Usable<T> = Thenable<T> | ReactContext<T>;
|
|
|
|
export type ReactCustomFormAction = {
|
|
name?: string,
|
|
action?: string,
|
|
encType?: string,
|
|
method?: string,
|
|
target?: string,
|
|
data?: null | FormData,
|
|
};
|
|
|
|
// This is an opaque type returned by decodeFormState on the server, but it's
|
|
// defined in this shared file because the same type is used by React on
|
|
// the client.
|
|
export type ReactFormState<S, ReferenceId> = [
|
|
S /* actual state value */,
|
|
string /* key path */,
|
|
ReferenceId /* Server Reference ID */,
|
|
number /* number of bound arguments */,
|
|
];
|