更新
我使用材料ui接下来，表组件，表是无状态组件，我也有构造函数组件 EnhancedTable 。同样在Table组件中，当我通过数据进行映射时，我需要检查所选的props（数组）是否与数据数组上的项目相同。
在映射数据数组时，如何检查const isSelected = selected.includes(item)。此外，当我点击我捕获错误 selected.includes不是一个功能
unselectSelected={() => onSelect(selected =>{
debugger
console.log(selected)})}
表格组件
let defaultCellRenderer = ({item, key}) =>
item[key]
const Table = props => {
const {data, columns, children, selectable, order, selected, onSelect, onDelete, onSearch, onDuplicate, onSort, search, onUnselectAll} = props
return (
<div>
{selectable &&
<EnhancedTableToolbar
numSelected={selected.length}
handleSearch={() => onSearch(data)}
value={search}
// unselectSelected={() => onUnselectAll(selected)}
unselectSelected={() => onSelect(selected =>{
debugger
console.log(selected)})}
deleteSelected={() => onDelete(selected)}
duplicateSelected={() => onDuplicate(selected)}
/> }
<MuiTable >
{selectable
? <EnhancedTableHead
columns={columns}
numSelected={selected.length}
order={order}
// onSelectAllClick={() => onSelect(Object.keys(new Array(selected.length).fill(0)))}
onSelectAllClick={() => onSelect(
console.log('click')
)}
onRequestSort={property => event => onSort(event, property)}
/>
: <TableHead>
<TableRow >
{columns.map(({label}) =>
<TableCell>
{label}
</TableCell>)}
</TableRow>
</TableHead>
}
<TableBody>
{data.map((item, index) => {
// debugger
const isSelected = selected.includes(item)
debugger
return (
selectable
? <TableRow
hover
onClick={() => onSelect(isSelected
? selected.filter(x => x != item)
: [...selected, item])}
role="checkbox"
aria-checked={isSelected}
tabIndex="-1"
key={index}
selected={isSelected}
>
<TableCell checkbox>
<Checkbox checked={isSelected}/>
</TableCell>
{columns.map(({key, cellRenderer, numeric}) =>
<TableCell key={key} numeric={numeric}>
{(cellRenderer || defaultCellRenderer)({item, key})}
</TableCell>)}
</TableRow>
: <TableRow hover>
{columns.map(({key, cellRenderer, numeric}) =>
<TableCell numeric={numeric}>
{(cellRenderer || defaultCellRenderer)({item, key})}
</TableCell>)}
</TableRow> )
})}
</TableBody>
</MuiTable>
</div>
)
}
EnchancedTable
class EnhancedTable extends Component {
state = {
selected: [],
data,
order: {
direction: 'asc',
by: 'deviceID',
},
search: '',
}
handleRequestSort = (event, property) => {
const orderBy = property
let order = 'desc'
if (this.state.order.by === property && this.state.order.direction === 'desc') {
order = 'asc'
}
const data = this.state.data.sort(
(a, b) => order === 'desc' ? b[orderBy] > a[orderBy] : a[orderBy] > b[orderBy],
)
this.setState({ data, order })
}
deleteSelected = () => {
const {data, selected} = this.state
this.setState({data: data.filter(item => !selected.includes(item)), selected: []})
}
handleSearch = event => {
const {data} = this.state
let filteredDatas = []
filteredDatas = data.filter(e => {
let mathedItems = Object.values(e)
let returnedItems
mathedItems.forEach(e => {
const regex = new RegExp(event.target.value, 'gi')
if (typeof e == 'string')
returnedItems = e.match(regex)
})
return returnedItems
})
this.setState({filterData: filteredDatas, search: event.target.value})
}
unselectSelected = () => {
this.setState({selected: []})
}
duplicate = () => {
const {data, selected} = this.state
this.setState({
// data: data.filter((item, index) => selected.includes(index)).reduce((p, c) => [...p, {...data[index]}], data),
data : [...data, ...selected],
selected: [],
})
}
handleSelectChange = selected => {
this.setState({selected})
}
render = () => {
const {selected, data, search, order} = this.state
return (
<Paper>
<Table
data={data}
selectable
columns={columns}
order={order}
search={search}
selected={selected}
onSelect={this.handleSelectChange}
onDelete= {this.deleteSelected}
onSort={this.handleRequestSort}
onDuplicate={this.duplicate}
onSearch={this.handleSearch}
// test unselect
onUnselectAll = {this.unselectSelected}
/>
</Paper>)
}
}
答案 0 :(得分：1)
在我看来，你在这里遇到了一些错误（以及一些可能只是奇怪的事情）。因为我不知道您示例中data的结构，所以我无法告诉您这里const isSelected = selected.includes(item)的检查是否正常。如果data数组中的某个项目是单个值，则此功能将起作用。例如，如果你有：
const data = [ 1,2,3,4 ]
并且
const selected = [1,2]
你可以按照目前的方式进行检查，这样可行。 const isSelected = selected.includes(item)
但是，如果您的数据是一个对象数组，例如：
const data = [ {id: 1},{id: 2},{id: 3} ]
并且
const selected = [{id:1}]
然后你需要像这样检查id值：
const isSelected = selected.some((i) => i.id === item.id )
而且当您在onClick方法中过滤它时，看起来您没有将selected设置为新值，这可能是您选择的原因。包含不是函数错误。你应该这样做。
onClick={() => onSelect(isSelected ? selected = selected.filter(x => x != item) : [...selected, item])}
我不确定为什么你不只是让你的onSelect方法处理行的选择和取消选择。类似的东西：
onClick={() => this.onSelect()}
然后在你的渲染方法之外：
onSelect() {
isSelected ? selected = selected.filter(x => x != item) : [...selected, item]
}
希望有所帮助。