您好，我正在努力將我的狀態從我的子組件正確更新到我的父組件。基本上我正在嘗試將當前狀態設定為 true onclick。
這是我的父組件：
export default function Layout({ children }: Props) {
const [navigation, setNavigation] = useState([
{ name: 'Dashboard', href: '/', icon: HomeIcon, current: true },
{ name: 'Create Fact', href: '/facts/create', icon: UsersIcon, current: false },
{ name: 'Documents', href: '/documents', icon: InboxIcon, current: false }
])
return (
<>
<Sidebar navigation={navigation} setNavigation={setNavigation} />
這是我的子組件（側邊欄）
type Props = {
navigation: Array<{
name: string
href: string
icon: any
current: boolean
}>
setNavigation: (
navigation: Array<{
name: string
href: string
icon: any
current: boolean
}>
) => void
}
const Sidebar = ({navigation, setNavigation}: Props) => {
const router = useRouter()
const toggleNavigation = (name: string) => {
// todo: Here I would like to properly update the state with the current selected navigation item (current)
const newNavigation = navigation.map(nav => {
if (nav.name === name) {
nav.current = true
return nav
}
})
}
return (
<nav className="flex-1 px-2 pb-4 space-y-1">
{navigation.map(item => (
<span
onClick={() => toggleNavigation(item.name)}
uj5u.com熱心網友回復：
存在三個問題：
你永遠不會
setNavigation用你的新陣列打電話。您不清楚
current以前的當前專案。盡管您正在創建一個新陣列，但您正在重用其中的物件，即使您更改了它們，這違反了“不直接修改狀態”規則。
要修復所有三個（請參閱***評論）：
const toggleNavigation = (name: string) => {
const newNavigation = navigation.map(nav => {
if (nav.name === name) {
// *** #3 Create a *new* object with the updated state
nav = {...nav, current: true};
} else if (nav.current) { // *** #2 make the old current no longer current
nav = {...nav, current: false};
}
return nav;
});
// *** #1 Do the call to set the navigation
setNavigation(newNavigation);
};
不過，另外，我建議navigation分成兩件事：
- 導航物件集。
- 當前導航項的名稱。
然后設定導航項只是設定一個新字串，而不是創建一個包含更新物件的全新陣列。
uj5u.com熱心網友回復：
TJ Crowder 的解決方案和解釋很棒。此外，您可以用更短的語法撰寫該邏輯。只是一種偏好。
const newNavigation = navigation.map(nav => {
return nav.name === name
? { ...nav, current: true }
: { ...nav, current: false }
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/415564.html
標籤：
上一篇：即使我添加了ID變數，對端點的洗掉呼叫中的“ID”變數也設定為“未定義”
下一篇：將物件保存到useState()