Более поддерживаемая альтернатива необязательной цепочке в React? - PullRequest
Новая
       4

Более поддерживаемая альтернатива необязательной цепочке в React?

0 голосов
/ 12 июля 2020

Этот код не работает, потому что проект не определен при начальной загрузке страницы: 

const project = useSelector(state => state.project.projects[projectID]);
const projectTasks = useSelector(state => state.project.projects[projectID].tasks);

Использование дополнительной цепочки решает эту проблему 

const projectTasks = useSelector(state => state.project.projects[projectID]?.tasks);

Однако я знаю, что эта функция была просто добавлен и, вероятно, не широко поддерживается.

Какая альтернатива?

Я придумал этот код: 

const project = useSelector(state => state.project.projects[ID]);
const projectTasks = project ? project.tasks : [];

Но он не работает, так как задачи проекта загружаются ПОСЛЕ загрузки проекта. Следовательно, компонент никогда не выполняет повторный рендеринг для изменения project.tasks.

1 Ответ

1 голос
/ 12 июля 2020

Необязательная цепочка делает доступ и извлечение глубоко связанных свойств объекта короче, проще и улучшает читаемость. Поддержка была добавлена ​​в chrome недавно. Он доступен в Chrome версии 80 и выше. Некоторые браузеры, такие как IE, вообще не поддерживают Optional Chaining. ( Список поддержки других браузеров )

  • Для поддержки всех браузеров вам нужно будет включить дополнительный плагин цепочки babel @ babel / plugin-offer-optional-chaining . Он будет обрабатывать все преобразования необязательного выражения цепочки, делая их выражения совместимыми со всеми браузерами.
...