javascript - Is it wrong to pass undefined to React setState? - Stack Overflow

admin管理员组

文章数量:1300174

Let's say I have the following state declared on my React ponent:

const [selectedUsers, setSelectedUsers] = useState<IUser['id'][]>();

Said state is used as the value for a third party HTML <select /> (Ant Design).

After I'm done using the <select /> I would like to clear it, which I easily can do by setting the value as null or undefined.

E.g.:

setSelectedUsers(null);

<select value={selectedUsers} /> // Is now null, no option is selected

However, I cannot pass null as the <select /> value due to the expected TS props on the select ponent as it expects to receive <IUser['id'][] | undefined>.

I.e.:

Type 'null' is not assignable to type 'string[] | undefined'.

Given the context above, is there any problem with passing undefined to the React state?

I.e.:

setSelectedUsers(undefined);

This is a question about best practices as the code above works perfectly if I use undefined instead of null.

Let's say I have the following state declared on my React ponent:

const [selectedUsers, setSelectedUsers] = useState<IUser['id'][]>();

Said state is used as the value for a third party HTML <select /> (Ant Design).

After I'm done using the <select /> I would like to clear it, which I easily can do by setting the value as null or undefined.

E.g.:

setSelectedUsers(null);

<select value={selectedUsers} /> // Is now null, no option is selected

However, I cannot pass null as the <select /> value due to the expected TS props on the select ponent as it expects to receive <IUser['id'][] | undefined>.

I.e.:

Type 'null' is not assignable to type 'string[] | undefined'.

Given the context above, is there any problem with passing undefined to the React state?

I.e.:

setSelectedUsers(undefined);

This is a question about best practices as the code above works perfectly if I use undefined instead of null.

• javascript
• reactjs
• typescript

Share Improve this question Follow edited Aug 23, 2021 at 19:00 Gustavo Máximo asked Aug 23, 2021 at 17:46 Gustavo MáximoGustavo Máximo 6,23033 gold badges2020 silver badges2727 bronze badges 2

• 1 nothing wrong with that but in my opinion, if it's gonna be an array, why not just initialize it as an empty array, also setting as empty array after you are done with it? – İlker Commented Aug 23, 2021 at 18:29
• @İlker Yep, that was the solution mikeb came up with in our chat discussion: chat.stackoverflow./rooms/236326/… – Gustavo Máximo Commented Aug 23, 2021 at 18:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Passing undefined as a value onto setState is perfectly fine. The value of the state, in your case selectedUsers, can be of any JavaScript type.

undefined is a "Primitive Value" in JavaScript and therefore a regular type. Find more about JavaScript types here: https://developer.mozilla/en-US/docs/Web/JavaScript/Data_structures#javascript_types

Just pass it [] as string[]

setSelectedUsers([] as string[]);

That should do it.

Edited to include the stuff in the ments:

The way the original question was worded you're type is a one-element array, this should be defined as:

const [selectedUsers, setSelectedUsers] = useState<string[]>();

Then, the solution above will work.

The type and constructor should be

const [selectedUsers, setSelectedUsers] = useState<[IUser['id']] | null>(null);

if you want null to be the null value. (undefined implicitly works since you don't pass in an initial state, since that's implicitly undefined.)

However, if you want to be able to select multiple values, you are probably looking for

const [selectedUsers, setSelectedUsers] = useState<Array<IUser['id']> | null>(null);

本文标签： javascriptIs it wrong to pass undefined to React setStateStack Overflow