TypeError：构建我的反应应用程序时无法读取未定义的属性“0”

Question

在构建我的 React 应用程序以进行部署时，我收到此错误

TypeError：无法读取未定义的属性“0”

当我在 port3000 上进行渲染时，我没有看到这个错误，但只是在构建应用程序时得到它。

谁能帮忙解决这个问题？

import { useState } from "react";
import styles from "./Tabs.module.css"

const Tabs = ({ children}) => {
    const [activeTab, setActiveTab] = useState (children [0].props.label);

    const handleClick =( e, newActiveTab ) => {
        e.preventDefault();
        setActiveTab(newActiveTab);
    }


    return (
        <div>
            <ul className= {styles.tabs}>
                {children.map ((tab) => {
                    const label = tab.props.label;
                    return (
                    <li
                    className= {label == activeTab ? styles.current : ""} 
                    key= {label}
                    >
                      <a href="#" onClick={(e) => handleClick (e, label)}>{label}
                      </a>
                    </li>
                    )
                })}
            </ul>
            {children.map ((tabcontent1) => {
                if (tabcontent1.props.label == activeTab)
                return (
                <div key= {tabcontent1.props.label} className= {styles.content}>{tabcontent1.props.children} 
                </div>
                );
            })}
            
        </div>
       
    );
}

export default  Tabs ;

Answer 1

在下一个 js 中，当您不在页面中放置 export const getServerSideProps = () => {} 时，该页面会自动进行静态侧渲染。在开发模式下，您可能会在右下角看到一个闪电符号。无论如何，您可以在 nextjs 上阅读 data-fetching 上的文档。但是，您可以通过将子项设置为useEffect，轻松解决您在这种情况下的问题。

// handle null on your active tab render function
const [activeTab, setActiveTab] = useState(null);

useEffect(() => {
 if(children.length)
  children[0].props.label
}, [children])

另一个代码示例： *代码结构和您尝试做的方式的简单更改。它正在反应，但在下一个也是一样的 *

import React from "react";

const Tabs = ({ tabsData }) => {
  const [activeTabIndex, setActiveTabIndex] = React.useState(0);

  const switchTabs = (index) => setActiveTabIndex(index);

  return (
    <div style={{ display: "flex", gap: 20, cursor: "pointer" }}>
      {/* Here active tab is given a green color and non actives grey */}
      {tabsData.map((x, i) => (
        <div
          key={i}
          style={{ color: activeTabIndex === i ? "green" : "#bbb" }}
          onClick={() => switchTabs(i)}
        >
          {x.label}
        </div>
      ))}
      {/* Show Active Tab Content */}
      {tabsData[activeTabIndex].content}
    </div>
  );
};

export default function App() {
  // You can place it inside tabs also in this case
  // but lets say you have some states on this component
  const tabsData = React.useMemo(() => {
    return [
      // content can be any component or React Element
      { label: "Profile", content: <p>Verify all Input</p> },
      { label: "Settings", content: <p>Settings Input</p> },
      { label: "Info", content: <p>INput info</p> }
    ];
  }, []);

  return (
    <div className="App">
      <Tabs tabsData={tabsData} />
    </div>
  );
}

这里也是一个示例沙箱https://codesandbox.io/s/serverless-night-ufqr5?file=/src/App.js:0-1219