有条件地添加需要数组的属性

问题描述

我正在使用 Material UI 的“Autocomplete”，它具有此属性 defaultValue 来指定多选组合框中的预选项目。

这是我的代码：

{showDTPicker &&
 <Autocomplete
  multiple
  onChange={(_,newValues) => {
   setSelectedDatatables(newValues)
  }}
  id="combo-Box-tables"
  options={datatables}
  defaultValue={selectedDatatables}
  getoptionLabel={(option) => option?.name}
  getoptionSelected={(option,value) => option?.name === value?.name}
  style={{width: 300,marginRight: '10px'}}
  renderInput={(params) => <TextField {...params} label="Select datatable" variant="outlined"/>}
 />
}

这是一个用于更新某些字段的框，因此它必须读取当前字段（selectedDatatables），然后更新状态（setSelectedDatables）以保存它们。

不过，有时某些对象没有任何字段集，因此 selectedDatatables 是 null。这会破坏组件，因为 defaultValue 属性需要一个数组。

如何仅在 selectedDatatable 不为 null 时使用此属性？

项目在 TS/TSX 中，selectedDatatables 是一个数组，其元素类型为 datatable（然后是具有其他字段（如名称和内容）的对象）。

showDTPicker 是一个状态值，在设置时显示组件。

解决方法

您可以将道具传递为：

defaultValue={selectedDatatables || []}