Блог

Я создаю PropTypes для функционального компонента и хочу использовать PropTypes.oneOf с объектом, импортированным из другого файла:

 import { MODES } from '../../../Users';
(...)
ManageUserForm.propTypes = {
    mode: PropTypes.oneOf(Object.values(MODES)),
}
  

В Users.js , РЕЖИМАХ выглядит так:

 export const MODES = {
    add: 'add', edit: 'edit', changePassword: 'changePassword',
    block: 'block', unblock: 'unblock', delete: 'delete'
};
  

Но я получаю сообщение об ошибке, указывающее, что MODES является undefined . На данный момент я решил проблему, просто жестко закодировав значения, но это неэлегантно, и я хочу улучшить его. Что я могу сделать?

РЕДАКТИРОВАТЬ: я воссоздал проблему в изолированной среде:codesandbox.io

У вас есть циклическая зависимость.

1. Сначала код импортируется Users.js из App.js .
2. Затем Users.js импортирует UserCreator.js .
3. Затем UserCreator.js импортирует ManageUserForm.js .
4. Затем ManageUserForm.js импортирует Users.js снова

Все это еще до того, как MODES определяется переменная. Вы не должны импортировать Users.js в ManageUserForm.js , поскольку Users.js само по себе зависит от ManageUserForm.js through UserCreator.js .

Вы можете переместить MODES определение в ManageUserForm.js и импортировать его в Users.js или, что лучше, полностью переместить его в отдельный файл.

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

 ManageUserForm.propTypes = {
  mode: PropTypes.oneOf(Object.values(require('../../../Users'))),
}
  

Вот пример CodeSandbox
https://codesandbox.io/s/react-example-forked-y1br4?file=/index.js