为什么我的 useState 数组没有被清空？

Question

我的使用状态：

const [valuesToSearchFor, setValuesToSearchFor] = useState([]);

我有以下带有onChange的搜索输入字段：

onChange={() => {
setValuesToSearchFor(
valuesToSearchFor.includes(value)
? valuesToSearchFor.filter(val => val !== value)
: [...valuesToSearchFor, value]
);
}}

这更改了我页面上的一些数据，如下所示：

{data.elements.filter((val) => {
if(valuesToSearchFor.includes(val.name.toLowercase()){
return val
}
}

唯一的问题是，当我删除输入字段时，它不会反映在数组中。问题如何清空valUesToSearchFor，以便在输入中键入另一个搜索？

Answer 1

如果没有看到更多的代码，很难说，但您应该销毁过滤后的valuesToSearchFor。否则，您将尝试直接修改状态道具

onChange={(e) => {
const value = e.target.value;
setValuesToSearchFor(
valuesToSearchFor.includes(value)
? [...valuesToSearchFor.filter((val) => val !== value)]
: [...valuesToSearchFor, value]
);
}}

正如@Amiratak88所指出的，这将在每次击键时向数组中推送一个新值。

同样，不确定你想做什么，但你可以选择使用更新/重置状态的按钮。

const MyComponent = () => {
const [searchValue, setSearchValue] = useState("");
const [valuesToSearchFor, setValuesToSearchFor] = useState([]);
return (
<>
<input
onChange={(e) => {
setSearchValue(e.target.value);
}}
/>
<button
onClick={(e) => {
e.preventDefault();
// update valuesToSearchFor with all unqiue values, including the current searchValue
setValuesToSearchFor([...new Set([...valuesToSearchFor, searchValue])]);
}}
>
Search
</button>
<button
onClick={(e) => {
e.preventDefault();
setValuesToSearchFor([]);
}}
>
Reset
</button>
</>
);
};