我有大约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相关问答推荐

导致类型错误的调度不是函数";

安装后未渲染tailwind

需要特定的数学函数来标准化动画持续时间

GitHub页面配置

如何使用TouchStart/TouchEnd在Table ReactJS中交换位置?

如何使用 React 获取表单中的所有值?

在添加了useplacesautocomplete后,在构建React/Next.js项目时,NPM抛出类型期望的错误

无法使axiosmockadapter正常工作

React Router v6 路径中的符号

为什么我会收到此错误:无法在我的react 包上读取 null 的属性(读取useState)?

Suspense/Await - 解析数据加载/保存到状态后无限循环

Next.js i18n 路由不适用于动态路由

如何在 React map 函数循环中使用
标签

顶点图表甜甜圈项目边框半径

在 React 的父级中多次调用子级时从子级获取数据到父级

如何检索包含动态段的未解析路径?

如何解决在 react.js 中找不到模块错误

无法有条件地更新useEffect中的setState

仅react material 表前端分页

创建react 应用程序中止 - 未找到 ESLINT