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

Question

我正在使用 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 不为空时使用此属性？

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

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

Answer 1

您可以将道具传递为：

defaultValue={selectedDatatables || []}

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

Conditionally add attribute that requires an array

jsx

typescript

reactjs

tsx

react-typescript