Javascript React PropTypes-对象列表之一

我有以下数组：

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 :( 
};

---

我认为您只需要将数组映射到有效语言条目的列表。

标签

属性似乎就是您想要的值

language: PropTypes.oneOf(VALID_LANGUAGES.map(({ label }) => label).isRequired

如果您需要语言代码，只需映射值即可

language: PropTypes.oneOf(VALID_LANGUAGES.map(({ value }) => value).isRequired

更新 事实上，我刚刚测试了你的原始代码，它也可以工作。每个值都将被验证，直到最后一个选项“Klingon”无效并记录proptypes错误。下面是一个codesandbox演示：

const VALID\u语言=[
{标签：“英语”，值：“en”}，
{标签：“法语”，值：“fr”}，
{标签：“意大利语”，价值：“it”}，
{标签：“葡萄牙语”，值：“pt”}，
{标签：“西班牙语”，值：“sp”}
];
const MyComponent=（{language}）=>language:{language.label}；
MyComponent.propTypes={
语言：PropTypes.isRequired（有效语言）之一
};
导出默认函数App（）{
const[language，setLanguage]=React.useState（0）；
返回(
setLanguage（e.target.value）}value={language}>
选择一种语言
{VALID_LANGUAGES.map（（语言，索引）=>(
{language.label}
))}
克林贡
);
}

也许您可以澄清什么和/或您的代码不起作用

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>
  );
}