Question

这是我第一次使用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状态没有改变，要么我的组件没有被重新渲染。

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

Answer 1

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

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

Answer 2

您的代码中有错误。在items中更改为TabHandler

React Hooks不会更改状态或触发重新渲染

2 个答案: