我如何使用 setState 更新數組內的對象

Question

這是我的狀態對象的結構

this.state = {
    navTabs: [
       {
         name: "Overview",
         isActive: true,
         clickHandler: (ev) => {
           this.setState(...);
         }
       },
       {
         name: "Projects",
         isActive: false,
         clickHandler: (ev) => {
           this.setState(...);
         }
       }
    ]
}

當用戶單擊導航選項卡時，我想更改每個對象的isActive值。 請問我該怎么做？

Answer 1

在navTab html 元素上的onClick處理程序中，您需要調用this.setState({ isActive: <value here> })

Answer 2

1. 首先保持數據干凈，編寫單個處理程序函數：

    navTabs: [ { name: "Overview", isActive: true }, { name: "Projects", isActive: false } ]

2. 根據要求編寫您的clickHandler 。 我正在下面的代碼中切換

   clickHandler = ()=>{ const updatedState ==this.state.navTabs.map(navTab=>({...navTab,isActive:!navTab.isActive})) this.setState({ navTabs:updatedState }) }

3. 試一試你的isActive會得到切換器，但最終它取決於你的要求。 如果您將navTabs作為道具傳遞給子組件並單擊特定的 navTab，則邏輯和代碼將有所不同。