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

【问题标题】：Conditionally add attribute that requires an array有条件地添加需要数组的属性
【发布时间】：2021-07-15 22:25:37
【问题描述】：

我正在使用 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 是一个状态值，在设置时显示组件。

【问题讨论】：

标签： reactjs typescript jsx react-typescript tsx

【解决方案1】：

您可以将道具传递为：

defaultValue={selectedDatatables || []}

【讨论】：

这很快。谢谢！