从 React 中的状态数组中删除一个对象
在 React 中从状态数组中移除一个对象:
- 使用 filter() 方法遍历数组。
- 在每次迭代中,检查是否满足条件。
- 将状态设置为 filter 方法返回的新数组。
import {useState} from 'react';
export default function App() {
const initialState = [
{id: 1, name: '火焰兔', site: 'www.zadmei.com'},
{id: 2, name: '百度', site: 'www.baidu.com'},
];
const [employees, setEmployees] = useState(initialState);
const removeSecond = () => {
setEmployees(current =>
current.filter(employee => {
// ?️ remove object that has id equal to 2
return employee.id !== 2;
}),
);
};
return (
<div>
<button onClick={removeSecond}>Remove second</button>
{employees.map(({id, name, country}) => {
return (
<div key={id}>
<h2>name: {name}</h2>
<h2>country: {site}</h2>
<hr />
</div>
);
})}
</div>
);
}
我们使用 useState 钩子初始化了一个 employee 状态变量。
我们传递给 Array.filter 方法的函数将被数组中的每个元素调用。
在每次迭代中,我们检查对象的 id 属性是否不等于 2 并返回结果。
const initialState = [
{id: 1, name: '火焰兔', site: 'www.zadmei.com'},
{id: 2, name: '百度', site: 'www.baidu.com'},
];
const filtered = initialState.filter(obj => {
// ?️ returns truthy for all elements that
// don't have an id equal to 2
return obj.id !== 2;
});
// ?️ [{id: 1, name: '火焰兔', site: 'www.zadmei.com'}]
console.log(filtered);
filter
方法返回一个新数组,该数组仅包含回调函数为其返回真值的元素。
如果条件从未满足,则
Array.filter
函数返回一个空数组。
我们向 setState
传递了一个函数,因为该函数保证以当前(最新)状态调用。
const removeSecond = () => {
// ?️ current is the current state array
setEmployees(current =>
current.filter(employee => {
return employee.id !== 2;
}),
);
};
当使用前一个状态计算下一个状态时,将一个函数传递给 setState。
否则,如果我们可以访问的状态数组不代表最新的值,我们可能会遇到一些奇怪的竞争条件。
如果我们需要根据多个条件从状态数组中删除对象,请使用逻辑 AND && 或逻辑 OR || 运算符。
const initialState = [
{id: 1, name: '火焰兔', site: 'www.zadmei.com'},
{id: 2, name: '百度', site: 'www.baidu.com'},
{id: 3, name: 'Google', site: 'www.google.com'},
];
const [employees, setEmployees] = useState(initialState);
const remove = () => {
setEmployees(current =>
current.filter(employee => {
return employee.id !== 3 && employee.id !== 2;
}),
);
};
我们使用了逻辑 AND && 运算符,如果两个条件都满足,它只会返回一个真值。
仅当对象的 id 属性不等于 3 且不等于 2 时,回调函数才返回 true。
这是一个使用逻辑 OR || 运算符的示例。
const initialState = [
{id: 1, name: '火焰兔', site: 'www.zadmei.com'},
{id: 2, name: '百度', site: 'www.baidu.com'},
{id: 3, name: 'Google', site: 'www.google.com'},
];
const [employees, setEmployees] = useState(initialState);
const remove = () => {
setEmployees(current =>
current.filter(employee => {
return employee.name === 'Alice' || employee.name === 'Carl';
}),
);
};
两个条件中的任何一个都必须评估为要添加到新数组中的元素的真实值。
换句话说,如果对象的 name 属性等于 火焰兔 或等于 百度,则该对象将被添加到新数组中。 所有其他对象都从数组中过滤掉。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。