React Hooks 不改变状态或触发重新渲染答案

【问题标题】：React Hooks not changing state or triggering re-renderReact Hooks 不改变状态或触发重新渲染
【发布时间】：2019-11-14 14:44:26
【问题描述】：

所以这是我第一次使用 React Hooks 制作组件

相同的代码是这样的

import React, { useState } from 'react'


const TabManager = (props) => {
  const {tabsData} = props
  const [activeTabId, setActiveTabId] = useState(0)
  console.log(activeTabId, tabsData)
  const TabHandler = (currentTabId) => { 
   setActiveTabId(activeTabId)
  }

  return  (
  <div className="tabs">
    <div className="row">
      <div className="col-12 col-md-4 col-lg-4">
      {tabsData.map(tab => {
        return  (
        <div className="tab-names"
        key={tab.id}
        onClick={() => TabHandler(tab.id)}>
          {tab.name}
        </div>
        )
      })}
      </div>
      <div className="tab-content">
        <div className="col-12 col-md-8 col-lg-8">
          {tabsData.map(tab => {
            console.log(activeTabId)
              if (tab.id === activeTabId) {
                return (
                  <div className="active-tab-image"
                  key={tab.id}>
                    <p>  {tab.name} </p>
                    <img src={tab.imageUri} />
                  </div>
                )
              }}
            )}
        </div>
      </div>
    </div>
  </div>
  )
}

export default TabManager

这不会在控制台中引发任何错误，但是当我通过此功能单击选项卡时

 onClick={() => TabHandler(tab.id)}>

要么我的 activeHandler 状态没有改变，要么我的组件没有被重新渲染。

有人可以帮我弄清楚我做错了什么吗？

【问题讨论】：

可能是错字。 setActiveTabId(activeTabId) -> setActiveTabId(currentTabId)?
解决了，谢谢

标签： reactjs

【解决方案1】：

你没有传递正确的函数参数，你传递的是activeTabId而不是currentTabId。试试这个

const TabHandler = (currentTabId) => { 
   setActiveTabId(currentTabId)
  }

【讨论】：

【解决方案2】：

您的代码中有错误。在TabHandler 更改为setActiveTabId(currentTabId)

【讨论】：