我如何使用 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，则逻辑和代码将有所不同。