Question

index.tsx

    const [activeTab, setActiveTab] = useState({ active: 'customers' });
      const [rowData, setRowData] = useState([]);
    
      const handleChangeTab = (activeKey) => {
        setActiveTab({ active: activeKey });
      }
    
      useEffect(() => {
    
        if (activeTab.active === 'customers') {
          setRowData([
            {
              customId: 1,
              name: "Customer 1",
            },
            {
              customId: 2,
              name: "Customer 2",
            }
          ])
        } else {
          setRowData([
            {
              customId: 1,
              name: "Supplier 1",
            },
            {
              customId: 2,
              name: "Supplier 2",
            }
          ])
        }
      }, []);
    
    return({
    <div>
     <Nav appearance="tabs" activeKey={activeTab.active} onSelect={handleChangeTab} justified>
              <Nav.Item eventKey="customers" icon={<Icon icon='group' />}>
                Customers
              </Nav.Item>
              <Nav.Item eventKey="suppliers" icon={<Icon icon='truck' />}>
                Suppliers
              </Nav.Item>
            </Nav>
    {rowData && rowData.map((item, index) => (
<div key={index}>
 <label>{index}</label>
<span>ID: {item.customId}</span>< br/>
<span>Name: {item.name}</span><br/></br>
</div>
)}
    </div>
        })

我在尝试更改选项卡时遇到问题，它不会更改 setRowData 的值。我也已经添加了这个：

useEffect((), => { .... }, [rowData]);

但它会导致无限循环。

如何在每次更改选项卡时更改 rowData 的值？没有无限循环？并且它应该改变 rowData 的值

Answer 1

useEffect 使用是正确的，但是依赖是错误的。您应该放入依赖项数组的是触发效果的值。在这种情况下，activeTab.active，因此它将是 useEffect(() => ..., [activeTab.active]);，因此当您更改选项卡时，会触发效果。

Answer 2


const rowData =
  activeTab.active === 'customers'
    ? [
        {
          customId: 1,
          name: 'Customer 1',
        },
        {
          customId: 2,
          name: 'Customer 2',
        },
      ]
    : [
        {
          customId: 1,
          name: 'Supplier 1',
        },
        {
          customId: 2,
          name: 'Supplier 2',
        },
      ];

根据 activeTab.active 指定 rowData

更新：

可以使用 useMemo 进行优化

const rowData = React.useMemo(
  () =>
    activeTab.active === 'customers'
      ? [
          {
            customId: 1,
            name: 'Customer 1',
          },
          {
            customId: 2,
            name: 'Customer 2',
          },
        ]
      : [
          {
            customId: 1,
            name: 'Supplier 1',
          },
          {
            customId: 2,
            name: 'Supplier 2',
          },
        ],
  [activeTab.active]
);

Answer 3

您在 useEffect 中指定了错误的依赖项。您需要指定依赖项 activeTab.active 才能正确触发。你的 useEffect 应该是 useEffect(() => { // your logic here }, [activeTab.active]

或者您可以在 handleChangeTab 函数本身中设置 rowData。

const handleChangeTab = (activeKey) => {
  setActiveTab({ active: activeKey });
  if (activeKey === 'customers') {
     setRowData([
        {
          customId: 1,
          name: "Customer 1",
        },
        {
          customId: 2,
          name: "Customer 2",
        }
      ])
 } else {
    setRowData([
       {
         customId: 1,
         name: "Supplier 1",
       },
       {
         customId: 2,
         name: "Supplier 2",
        }
    ])
  }
}

如何在反应钩子中更改 rowData 状态的值

3 个答案: