Question

我有一个工作材料ui auto组件，该组件具有以下代码：

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

当props.post.category在props.post.category中只有一个值时，此方法有效。

当34,36中有两个值，例如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]]

Answer 1

您可以将任何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}
  />
)

材质UI自动完成，多个默认值

1 个答案: