时间戳

首页 > 解决方案 > Material UI 自动完成，多个默认值

javascript - Material UI 自动完成，多个默认值

问题描述

我有一个具有以下代码的工作材料 ui 自动组件：

     <Autocomplete
              multiple
              options={props.cats}
              defaultValue={editRequest?([props.cats[props.post.category]]):undefined}
              limitTags={2}

这适用于 props.post.category 在 props.post.category 中只有一个值的情况。

当有两个值时，例如34,36进入 for props.post.category，它会破坏页面并显示错误。在普通函数中，我会使用 .map 循环遍历数组。这是在里面，defaultValue所以我不知道如何分配两个默认值，它们基本上是

props.cats[34] and props.cats[36]

换句话说，用逗号分隔的字符串如何转换为单独的数组

input=> 34,35 (stored in props.category)
array=> [props.cats[34], props.cats[35]]

标签： javascriptreactjsmaterial-ui

解决方案

你可以props.post.category用方括号括起来，flat然后它map，所以你不必担心它是单个值还是值数组

console.log([34].flat())
console.log([[35, 36]].flat())

const getDefaultValue = () => {
  if (!editRequest) {
    return undefined
  }

  return [props.post.category].flat().map((cat) => props.cats[cat])
}

return (
  <Autocomplete
    multiple
    options={props.cats}
    defaultValue={getDefaultValue()}
    limitTags={2}
  />
)

推荐阅读