我在ReactJs中使用Hooks为我的表的每一列提供了一个搜索过滤器，但是出现类似-
的错误无法读取未定义的属性“ toLowerCase”
当我输入function FournisseursTable(props) {
const classes = useStyles();
const dispatch = useDispatch();
const fournisseurs = useSelector(
({ fournisseursApp }) => fournisseursApp.fournisseurs.data
);
const [selected, setSelected] = useState([]);
const [data, setData] = useState(fournisseurs);
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [order, setOrder] = useState({
direction: "asc",
id: null
});
const [searchTerm, setSearchTerm] = React.useState("");
const handleChangeSearch = e => {
setSearchTerm(e.target.value);
};
useEffect(() => {
dispatch(Actions.getFournisseurs());
}, [dispatch]);
useEffect(() => {
setData(
searchTerm.length === 0
? fournisseurs
: fournisseurs.filter(fournisseur => {
const filtersKeys = Object.keys(searchTerm);
const hasCorrespondences = filtersKeys.map( key =>
fournisseur[key].toLowerCase().includes(searchTerm[key].toLowerCase())).every(curVal=> !!curVal);
return hasCorrespondences;
})
);
}, [fournisseurs, searchTerm]);
时。
有人知道这个错误是从哪里来的吗？
这是我的代码：
TableCell 然后将TextField与<TableCell className={classes.headerTableCell} >
<Tooltip className="w-full" title="Sort" enterDelay={100}>
<TableSortLabel
className="w-full"
direction={order.direction}
>
Code fournisseur
</TableSortLabel>
</Tooltip>
<TextField
margin="dense"
InputProps={{ className: classes.inputSearch }}
className={classes.rootSearch}
label="Rechercher"
name="Recherche"
variant="outlined"
fullWidth
onChange={handleChangeSearch}
/>
</TableCell>
：
handleChangeSearch谢谢
编辑（以使代码生效）：
const handleChangeSearch = type => (e) => {
const newSearchTerm = {
...searchTerm,
[type]:e.target.value
}
if(e.target.value === ""){
delete newSearchTerm[type]
}
setSearchTerm(newSearchTerm);
};
的修改：
useEffect以及useEffect(() => {
const filtersKeys = Object.keys(searchTerm);
setData(
filtersKeys.length === 0
? fournisseurs
: fournisseurs.filter(fournisseur => {
const hasCorrespondences = filtersKeys
.map( key => fournisseur[key].toLowerCase().includes(searchTerm[key].toLowerCase()))
.every(curVal=> !!curVal);
return hasCorrespondences;
})
);
}, [fournisseurs, searchTerm]);
的修改：
onChange={handleChangeSearch("codeFournisseur")}最后，在TextField中致电column_1<Array> | column_2 <Array> | column_3 <Array> | join_columns
----------------------------------------------------------------------------------------------------------------------------------------
["2345", "98576", "09857"] | null | ["9857"] | ["2345", "98576", "09857", "9857"]
----------------------------------------------------------------------------------------------------------------------------------------
null | ["87569", "9876"] | ["76586"] | ["87569", "9876","76586"]
----------------------------------------------------------------------------------------------------------------------------------------
["08798","07564"] | ["12345","5768","89687","7564"] | ["7564"] | ["08798","07564","12345","5768","89687", "7564"]
----------------------------------------------------------------------------------------------------------------------------------------
["03456", "09867"] | ["87586"] | [] | ["03456", "09867","87586"]
------------------------------------------------------------------------------------------------------------------------------------------