在React中,要更新数组状态的特定属性,可以使用map
方法来遍历数组并更新目标属性。以下是一个示例代码:
import React, { useState } from 'react';
function App() {
const [items, setItems] = useState([
{ id: 1, name: 'Item 1', completed: false },
{ id: 2, name: 'Item 2', completed: false },
{ id: 3, name: 'Item 3', completed: false }
]);
const handleComplete = (itemId) => {
setItems(prevItems => prevItems.map(item => {
if (item.id === itemId) {
return { ...item, completed: true };
}
return item;
}));
};
return (
<div>
<ul>
{items.map(item => (
<li key={item.id}>
{item.name} - {item.completed ? 'Completed' : 'Not Completed'}
<button onClick={() => handleComplete(item.id)}>Complete</button>
</li>
))}
</ul>
</div>
);
}
export default App;
在上面的代码中,我们使用useState
钩子来创建一个名为items
的状态数组。handleComplete
函数用于处理点击"Complete"按钮时的逻辑。在handleComplete
函数中,我们使用map
方法遍历items
数组,并根据传入的itemId
来更新目标属性completed
为true
。最后,通过调用setItems
函数来更新状态数组。
这个例子中,我们展示了一个简单的待办事项列表,每个事项都有一个"Complete"按钮。当点击按钮时,相应的事项的completed
属性会被更新为true
,并在界面上显示为"Completed"。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云