javascript - React PropTypes - OneOf 对象列表
问题描述
我有以下数组:
export const VALID_LANGUAGES = [
{ label: "English", value: "en" },
{ label: "French", value: "fr" },
{ label: "Italian", value: "it" },
{ label: "Portuguese", value: "pt" },
{ label: "Spanish", value: "sp" },
];
而且我想确保组件作为道具“语言”接收这些值之一。我该怎么做?
MyComponent.propTypes = {
language: PropTypes.oneOf(VALID_LANGUAGES).isRequired, // Doesn't work :(
};
解决方案
我认为您只需要将数组映射到有效语言条目的列表即可。该label
物业似乎是您想要的价值。
language: PropTypes.oneOf(VALID_LANGUAGES.map(({ label }) => label).isRequired
如果您想要语言代码,只需映射该值。
language: PropTypes.oneOf(VALID_LANGUAGES.map(({ value }) => value).isRequired
更新
实际上,我只是测试了您的原始代码,它也可以工作。每个值都经过验证,直到最后一个选项“Klingon”无效,并且记录了 proptypes 错误。这是一个codeandbox演示:
const VALID_LANGUAGES = [
{ label: "English", value: "en" },
{ label: "French", value: "fr" },
{ label: "Italian", value: "it" },
{ label: "Portuguese", value: "pt" },
{ label: "Spanish", value: "sp" }
];
const MyComponent = ({ language }) => <div>Language: {language.label}</div>;
MyComponent.propTypes = {
language: PropTypes.oneOf(VALID_LANGUAGES).isRequired
};
export default function App() {
const [language, setLanguage] = React.useState(0);
return (
<div className="App">
<select onChange={(e) => setLanguage(e.target.value)} value={language}>
<option value={-1} disabled>
Select a Language
</option>
{VALID_LANGUAGES.map((language, index) => (
<option key={language.value} value={index}>
{language.label}
</option>
))}
<option value={-1}>Klingon</option>
</select>
<MyComponent language={VALID_LANGUAGES[language]} />
</div>
);
}
也许你可以澄清你的代码是什么和/或如何不工作的。
推荐阅读
- android - 使用 adjustResize 按钮应该粘在底部
- ios - iOS 上 FCM 通知的声音和振动?
- kotlin - Kotlin 中的排序算法
- google-bigquery - BigQuery Weather 公共数据集 - 缺少最近几天的数据
- ios - Xcode 无法安装应用程序
- python - Localstack 和 AWS SQS 接收带有 boto3 的消息返回不同的消息格式
- javascript - 停止捕获(录制)后,iOS 13 无法播放音频(Web Audio API)
- spring - 将 spring 数据配置连接到 IBM DB2 z/os 时出现异常
- primefaces - PrimeFaces 日期选择器弹出窗口未显示
- r - 在不使用 ifelse() 的情况下,我们如何在 R 中创建 if 语句来评估逻辑值向量