我正在为我的React网站构建过滤功能。该网站显示商店列表，我想让用户按商店所在国家/地区以及商店是否接受现金付款过滤列表。
为此，我有一个名为state的{{1}}，其中包含原始的商店数组。
还有一个名为stores的{{1}}，它以state
当用户从列表中选择一个国家时。该应用将filteredStores数组替换为仅包含所选国家/地区商店的新数组，并将其显示在屏幕上。
用户可以检查名为{strong>接受现金付款的stores以仅显示接受现金付款的商店，对于此过滤器，我有一个名为filteredStores的{{1}}
用户应该既可以使用过滤器，也可以同时使用两者。
checkbox当我选择一个国家/地区时，假设是澳大利亚，而一张支票接受现金，它会显示正确的已过滤商店。如果我取消选中接受现金，它会正确显示来自澳大利亚的所有商店，而无需应用第二个过滤器。问题是，如果我选择了一个国家/地区并接受现金，然后我想取消选择该国家/地区，则state状态不会得到更新，因此它将继续显示先前选择的商店国家。如果我取消选中接受现金，那么状态会更新，并且所有商店都会再次显示。
acceptCash函数应在开始运行时将 const { countryFiltering, setCountryFiltering } = useContext(countryFilteringContext);
const { acceptCashFiltering, setAcceptCashFiltering } = useContext(acceptCashFilteringContext);
// ****** Run filterStores every time the state of countryFiltering or acceptCashFiltering changes ******
useEffect(() => {
filterStores();
}, [countryFiltering]);
useEffect(() => {
filterStores();
}, [acceptCashFiltering]);
// ****** COUNTRY FILTER ****** ****** COUNTRY FILTER ****** ****** COUNTRY FILTER ******
const countryFilter = (value) => {
if (countryFiltering.indexOf(value) === -1) {
setCountryFiltering([...countryFiltering, value])
setCountrySearch('');
}
else {
const array = countryFiltering.filter(country => country != value);
setCountryFiltering(array);
setCountrySearch('');
}
}
// ****** OPTIONS FILTER ****** ****** OPTIONS FILTER ****** ****** OPTIONS FILTER ******
const optionsFilter = (filter, value) => {
if (filter === 'cash') {
if (!acceptCashFiltering) {
setAcceptCashFiltering(value);
} else {
setAcceptCashFiltering('');
}
}
}
// ****** FILTER STORES ****** ****** FILTER STORES ****** ****** FILTER STORES ******
const filterStores = () => {
setFilteredStores(stores);
if (countryFiltering) {
var array = [];
countryFiltering.map((country) => {
const countries = stores.filter(store => store.storeFields.identity.location.country === country);
countries.map(country => array = [...array, country]);
setFilteredStores(array);
});
};
if (acceptCashFiltering === 'Yes') {
var array = [];
array = filteredStores.filter(store => store.storeFields.storeRequirements.acceptCash === 'Yes');
setFilteredStores(array);
}
}
// ****** END ****** ****** END ****** ****** END ******
return (
<div>
<div key={countryArray.indexOf(country)}>
<div onClick={() => { countryFilter(country) }} >{country}</div>
</div>
<div>
<label htmlFor='cash'>Accept Cash Payments</label>
<input type='checkbox' value='Yes' id='cash' onChange={(e) => { optionsFilter('cash', e.target.value) }} />
</div>
</div>
)
状态重置为原始filteredStores状态，但似乎并没有这样做，不知道为什么。知道为什么检查 Accept Cash 过滤器后filterStores()数组没有得到更新吗？
答案 0 :(得分：0)
您遇到的问题是阵列的深层克隆和浅层克隆。
尝试将setFilteredArray(array)替换为setFilteredArray([...array])
如果您不喜欢销毁，那么还有一个相当丑陋但非常有效的替代方法是setState(JSON.parse(JSON.stringify(array)))
这会引起反应状态can be seen here.
的原因的解释