React, javascript findIndex issue

Question

当我得到activeFilters这样的值时：

const filter = [...activeFilters]

findIndex总是返回-1，即使我正在搜索的项存在。

但当我变成这样的时候，它有效吗？

const filter = activeFilters

我错过什么了吗？

const [activeFilters, setActiveFilters]  = useState([]);
const handleFilters = async (selectedKeys) => {

const filter = activeFilters

const index = filter.findIndex(array => array.key === selectedKeys.key)
console.log(index)
if(index !== -1){
filter[index] = selectedKeys
}
else{
filter.push(selectedKeys)
}
console.log(filter)
setActiveFilters(filter)

}

**编辑***

console.log在选择两个不同的过滤器后的过滤器输出而不使用排列运算符：

(2) [{…}, {…}]
0: {value: Array(2), key: "sourceCustomer"}
1: {value: Array(1), key: "targetCustomer"}           

选择两个不同的滤波器：后，使用扩展运算符在上输出console.log

[{…}]
0: {value: 321123, key: "cost"}

它的价值总是被取代

Answer 1

您能试用以下内容并查看您的console.log吗？

const [activeFilters, setActiveFilters]  = useState([]);
const handleFilters = (selectedKeys) => { // no async

const filter = [...activeFilters]
console.log('filter', filter) // check that your array is populated before you're doing findIndex

const index = filter.findIndex((array) => {
console.log('array Key', array.key, 'equality', array.key === selectedKeys.key)
return array.key === selectedKeys.key
});
console.log('index', index);
(...)
}

它应该工作得很好，第二种方法有几个错误，你真的不能做const filter = activeFilters，因为你直接改变了状态，这在React中是不允许的。

请尝试我建议的日志记录并查看输出，我认为您将能够捕捉到错误。

Answer 2

我设法解决了在useEffect上添加activeFilters的问题第二个参数如：

useEffect(
function fetchColumns() {
const result = handleColumns.find(
(element) => element.key === transactionContext
);
return setColumns(result.value);
},
[partners, transactionType, partnerScroll, activeFilters]
);

这种方式可以在activeFilters上看到变化。。但我不知道这是否是最好的

一些过滤列的示例：

const columnsInsider = [
{
title: "Detalhes wallet",
align: "center",
render: (render) => (
<Button
handleClick={() => handleDetails(render.transactionWallet.data)}
icon={<FaRegEye color={softGrey} />}
backgroundcolor="transparent"
/>
),
},
{
title: "Tipo de Transação",
dataIndex: ["transactionType", "desc"],
sorter: true,
key: "orderTransactionType",
...getColumnSearchProps(
"type",
"select",
"multiple",
fetchTransactionTypes,
transactionType
),
},
{
render: (render) =>
Moment.utc(render.transactionDate).format("DD-MM-YYYY HH:mm:ss"),
title: "Data",
key: "orderTransactionDate",
sorter: true,
...getColumnSearchProps("date", "datepicker"),
},
{
title: "Nome origem",
dataIndex: ["source", "name"],
sorter: true,
key: "orderSourceCustomerName",
},
{
render: (render) => formatCnpjCpf(render.source.document.value),
title: "Documento origem",
...getColumnSearchProps("sourceCustomer", "select", "tags"),
},
{
title: "Nome destino",
dataIndex: ["target", "name"],
sorter: true,
key: "orderTargetCustomerName",
},
{
render: (render) => formatCnpjCpf(render.target.document.value),
title: "Documento destino",
...getColumnSearchProps("targetCustomer", "select", "tags"),
}
]

调用handleFilters:的自定义面板过滤器

const getColumnSearchProps = (
dataIndex,
filter,
mode = null,
fetchOptions = null,
options = [],
onScroll
) => {
return {
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters,
}) => (
<div style={{ padding: "1rem" }}>
<Filter
filter={filter}
mode={mode}
placeholder={`Pesquisar...`}
onFocus={fetchOptions}
onChange={setSelectedKeys}
onPressEnter={() =>
handleFilters(
{ value: selectedKeys, key: dataIndex },
confirm,
dataIndex
)
}
options={options}
onPopupScroll={onScroll}
handleFilter={() =>
handleFilters(
{ value: selectedKeys, key: dataIndex },
confirm,
dataIndex
)
}
handleClear={() => handleClearFilters(clearFilters)}
/>
</div>
),
filterIcon: (filtered) => {
return (
<SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
);
},
};
};