我有大约50个选项要显示在react select options中.但我想把一些逻辑选项排除在已经发布的值之外.

重构代码:

export default function App() {
  const choices = [
    {
      value: 0,
      label: "Container empty to shipper"
    },
    {
      value: 1,
      label: "Container pickup at shipper"
    },
    {
      value: 2,
      label: "Container arrival at first POL (Gate in)"
    },
    {
      value: 3,
      label: "Container loaded at first POL"
    }
  ];

  const postedList = [
    "Container empty to shipper",
    "Container pickup at shipper"
  ];
  return (
    <div className="App">
      <h1>Select Box</h1>
      <Select
        isClearable={false}
        // here the choices should be 2 eliminating the other 2 whose labels are matching to postedlist 
        options={choices}
        defaultValue={choices[0]}
        onChange={(choice) => console.log(choice.value)}
      />
    </div>
  );
}

目前,它呈现了所有4个选项,但我只想返回其中两个标签与postedlist 不匹配的选项

我还创造了Codesandbox个.如果你想在那里看的话.

推荐答案

您可以使用Array.prototype.filter()Array.prototype.includes()来过滤已发布的项目.然后使用filteredList作为Select组件的输入,如下所示.

  const filteredList = choices.filter(({ label }) =>
    !postedList.includes(label)
  );

  return (
    <div className="App">
      <h1>Select Box</h1>
      <Select
        isClearable={false}
        options={filteredList}
        defaultValue={filteredList[0]}
        onChange={(choice) => console.log(choice.value)}
      />
    </div>
  );

Edit happy-wave-yktw2j

Reactjs相关问答推荐

React Router v6 路径中的符号

条件渲染元素的测试不起作用

如何在不重新加载页面的情况下加载新添加的数据?

@react-three/postprocessing 没有匹配的从 three.module.js 导出以导入WebGLMultisampleRenderTarget

React + i18next + Trans + Prettier:Prettier 最终会在重新格式化 JSX 时 destruct 翻译

不能在我的代码中使用 .给我一个警告!有人知道解决方案吗?

如何使图标适合 react-bootstrap 中的行元素

具有自动完成功能的 Formik material ui 无法按预期工作

谁能根据经验提供有关 useEffect 挂钩的更多信息

模块解析失败:意外令牌 (257:106) 您可能需要适当的加载程序来处理此文件类型

如何通过 Material Ui 设计将 Accordion 添加到您的 React 项目中?

在 React 中使用使用状态挂钩合并两个数组

react 路由:router.ts:11 没有匹配的路由位置/管理

未找到 404 页面不工作 react-router v6(使用多个参数)

使用 React 的步进器(Stepper)功能

React - useState 未设置初始值

如何使用 ReactJS 通过 Material UI Dialog 提交表单

是否有基于 React 的项目的官方风格指南或命名约定?

将函数传递给子组件

如何在 reactjs 中使用 this.refs 从输入类型中获取值?