我有大约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 路由 6 和 useContext

设置紧凑类型 Null 时通过删除 React Grid 布局的空格来修复布局

类型错误:display.map 不是函数

React/Next.js,以艰难的方式平移 SVG

使用react 环境变量有什么意义?

try 将 React 应用程序部署到 *.github.io 页面;得到“意外的令牌:'<'”

即使在react 路由中刷新后,有没有办法坚持在同一页面上?

具有多个参数的redux工具包减速器?还原工具包

如何使用 react-bootstrap 在表单中并排放置两个选择

如何用 yew 查询和更新 DOM?

我如何使用下一个 js 对这个函数中的日期进行硬编码

react:如何创建一个可重用的自定义钩子,其功能和效果可以改变并对主机组件数据的变化做出晌应

带有 React 的 CSS 模块 - 使用多个类名

阻止文本更新,直到组件(Dialog、Snackbar 等)关闭

Reactjs 开发工具中的钩子编号对应什么?

以编程方式提交表单不会触发 onSubmit 事件

跟踪 React 组件重新渲染的原因

Next.js 的“build-time”究竟是什么时候发生的?

Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin

在呈现不同的组件警告时无法更新组件