如何在不影响主数组Reactjs的情况下将过滤数组传递给另一个组件

Question

嗨，我正试图实现一个搜索功能，我需要将我的过滤(搜索数组)传递给另一个功能组件，如果没有搜索，则需要通过我通过API响应获得的主数组。但是每当我尝试这样做时，它都会重置useStatehook过滤的那个

下面是一个例子:

import React, { useState, useEffect, useContext, useMemo } from "react";
import { Search} from "carbon-components-react";
import { debounce } from 'lodash';
const ComponentA = () => { 
const arr = [
{
name: "GARCIA, LALITA M",
fname: "LALITA",
lname: "GARCIA",
mname: "M",
id: "lxgFfg",
userType: "FRN",
userStatus: "A",
type: "User",
brands: [
"PHI"
]
},
{
name: "ANDREW, DONALD M",
fname: "DONALD",
lname: "ANDREW",
mname: "M",
id: "lxgHJg",
userType: "FRN",
userStatus: "A",
type: "User",
brands: [
"PHI"
]
}
]; 
// just here I put hard coded array but we got similar array from API and every time array is different as per API response.
const [unassignedStoresList, setUnassignedStoresList] = useState(arr);

const searchStoreLists = (value) => {
if(unassignedStoresList.length === 0) return;
if(value !== ""){
let searchArr = [...unassignedStoresList];
let searchableArr = searchArr.filter((ele) => {
let searchValue = ele.name.toLowerCase();
let searchId = ele.id.toLowerCase();
return (searchValue.indexOf(value) !== -1 || searchId.indexOf(value) !== -1);
});
setUnassignedStoresList(searchableArr); // once modified
} else {
setUnassignedStoresList(unassignedStoresList); // Not setting original array if search is off
}
}
return(
<Search
light
closeButtonLabelText="Search"
id="search-1"
labelText="Search User"
onChange={ debounce((event) => {
searchStoreLists(event.target.value);
}, 500)}
size="lg"
/> 
<ComponentB
unassignedStoresList={unassignedStoresList}
/>
);
}

我是新的反应，请帮助我我在这里做错了什么。谢谢. . ! !

Answer 1

您的原始数组不是未分配的storelist，而是传递给useState进行初始化的arr。因此,取代

其他{setUnassignedStoresList (unassignedStoresList);//如果搜索是关闭的，不设置原始数组}

其他{setUnassignedStoresList (arr);//如果搜索是关闭的，不设置原始数组}

我希望这对你有帮助。如果没有，请告诉我。