Как правильно инициализировать пустые состояния в react с помощью typescript

#javascript #reactjs #typescript #react-hooks

Вопрос:

Я совсем новичок в реагировании и задавался вопросом, как правильно инициализировать пустые переменные состояния в react. В настоящее время у меня есть форма в машинописном виде, в которой есть несколько полей для заполнения. Большинство из этих полей являются выпадающими, и я инициализировал некоторые статические данные в виде массива объектов примерно так.

 export const options = [  {  id : 0,  name : "Setting 1"  },  {  id : 1,  name : "Setting 2"  },  {  id : 2,  name : "Setting 3"  }  ];

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

 const [myForm, setMyForm] = React.useState({  dropdown : options[0],  dropdown1 : options1[0]  });

Поэтому для меня в myForm объекте, который я зарегистрировал для отслеживания состояния, я по умолчанию выбираю первый вариант, как я указал. Я не могу инициализировать его null , так как typescript требует типа для любого объявления. Как лучше всего изначально использовать значение в качестве пустого объекта и установить его позже, когда пользователь проверит параметр в раскрывающемся списке. Потому что, если я установлю его в пустой объект, как {} в options , я не смогу получить доступ id name к полям и в коде. Может ли кто-нибудь сказать мне, как это правильно сделать

1. Учитывая, что в любом случае существует начальный шаг рендеринга, какие значения по умолчанию id и name ожидает ли он?

2. @zerkms я просто хочу, чтобы он был пустым, должен ли я добавить дополнительный объект в options массив, который имеет id значение -1 и имя «-1», или есть способ установить состояние равным нулю и использовать поля объекта( id и name ) или мне нужно добавить дополнительный объект?

3. Что именно означает «пустой»? Если вы читаете id свойство — какое значение вы ожидаете там по умолчанию ?

4. Пусто, как и в, ничего не выбрано, скажем, для объяснения id = -1 и name = "-1" в выпадающем списке

5. Любой крючок реакции является общим. Таким образом, вы можете использовать generic для описания типа состояния. Нравится useStatelt;{} | nullgt;(null);

Ответ №1:

useState можно взять один тип. Это хорошо для случаев, когда Typescript не может определить тип по типу начального значения. Это часто происходит с любым null значением по умолчанию. Вам нужно сообщить typescript, каким может быть значение, когда его нет null .

Например:

 const [name, setName] = useStatelt;string | nullgt;(null)  // name is of type: string | null if (name != null) console.log(name.toUpperCase())

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

 interface State {  dropdown: FormField  dropdown1: FormField }  interface FormField {  id: number  name: string  value?: string }

А затем используйте этот тип:

 const [myForm, setMyForm] = React.useStatelt;Stategt;({  dropdown : options[0],  dropdown1 : options1[0] });  myForm.dropdown.name // allowed, and type is: string | undefined