[英]How do I update my state after deleting values in an array which was processed with join()?
I have an array called selectedOption
that looks like this:我有一个名为
selectedOption
的数组,如下所示:
[
"Fantasy",
"Mystery",
"Romance",
"Scifi"
];
Using a multi-select input,使用多选输入,
I can choose multiple options, (ie. Romance, Mystery).我可以选择多个选项,(即浪漫,神秘)。 Then save these in a state called
query
然后将这些保存在名为
query
的 state 中
When I log selectedOption
in the browser terminal and copy it, it looks like this当我在浏览器终端中记录
selectedOption
并复制它时,它看起来像这样
[
[
"Mystery",
"Romance"
]
]
Problem问题
As mentioned, I need to get the string(s) and save them in query
.如前所述,我需要获取字符串并将它们保存在
query
中。 Below is how I check if the array has stuff in it, and if it does, I use join() to get the string values and then I save that into 'query' (This data in query
is used for a query search)下面是我如何检查数组中是否有东西,如果有,我使用 join() 获取字符串值,然后将其保存到“查询”中(查询中的此数据用于
query
搜索)
const [selectedOption, setSelectedOption] = useState([]);
const [query, setQuery] = useState();
//selecting an option
const handleTypeSelect = (e) => {
const copy = [...selectedOption];
copy.push(e);
setSelectedOption(copy);
//to zone in on what I need, I have to get the first array value.
console.log(selectedOption[0]);
//only perform join() if the array has stuff in it.
if(!selectedOption.length){
} else {
let joinedArr = selectedOption[0].join(", ");
//save the strings into my query state
setQuery(joinedArr)
console.log(query)
}
};
Results Here is my query state, exactly what I want:结果这是我的查询 state,正是我想要的:
Problem Everything kinda works to this point.问题到目前为止,一切都还不错。 The issue I have is that, when I delete 'Romance' for example, it's not reflected in my query state.
我遇到的问题是,例如,当我删除“浪漫”时,它并没有反映在我的查询 state 中。 Below is the code to remove one select option.
下面是删除一个 select 选项的代码。 How do I write this code so that when I delete an option, it's reflected in my query
state
, do I need to make it into an object again?如何编写此代码,以便当我删除一个选项时,它会反映在我的查询
state
中,我是否需要再次将其变为 object ?
const handleTypeRemove = (e) => {
const copy = [...selectedOption];
let index = copy.indexOf(e);
copy.splice(index, 1);
setSelectedOption(copy);
};
When I delete something ie.当我删除某些东西时。
It does not delete it from query
- here is the log fired up after calling handleTypeRemove
它不会从
query
中删除它 - 这是调用handleTypeRemove
后触发的日志
Your help is greatly appreciated, assume you are explaining to a child.非常感谢您的帮助,假设您正在向孩子解释。
The copied variable does not change the state, you'll have to also update the query
with setQuery
复制的变量不会更改 state,您还必须使用
setQuery
更新query
const handleTypeRemove = (e) => {
const copy = [...selectedOption];
let index = copy.indexOf(e);
copy.splice(index, 1);
setSelectedOption(copy);
setQuery(copy.join(', '));
};
Instead of having two sets of logic doing the same thing, instead you can use React useEffect .您可以使用React useEffect代替两组逻辑做同样的事情。
Like so像这样
const handleTypeSelect = (e) => {
const copy = [...selectedOption];
copy.push(e);
setSelectedOption(copy);
};
const handleTypeRemove = (e) => {
const copy = [...selectedOption];
const index = copy.indexOf(e);
copy.splice(index, 1);
setSelectedOption(copy);
};
useEffect(() => {
if (!selectedOption.length) {
} else {
const joinedArr = selectedOption[0].join(", ");
//save the strings into my query state
setQuery(joinedArr);
console.log(query);
}
// this means this code inside this block runs everytime selectedOption changes
}, [selectedOption]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.