React 為什么這個簡單的數組映射函數不返回任何內容？

Question

我有一個 React 組件，為數組（稱為 activePath）中的項目創建項目符號列表。 陣列通過 console.log 正確報告，格式如下：

{device_id: "nlab5320a", port_id: "XGigabitEthernet0/0/3"}

陣列中有六個。 我做了一個 Array.isArray 只是為了確認這是一個真正的數組。 我正在嘗試映射此數組並輸出帶有以下內容的項目符號列表：

activePath.map((item, i) => (
  <li key={i}>{item.device_id}</li>
));

這是整個組件......

export default class ServicesInfo extends React.Component {
  render() {
    const { activePath } = this.props;
    const runTable = activePath.map((item, i) => (
      <li key={i}>{item.device_id}</li>
    ));

    return (
      <div>
        <ul>{runTable}</ul>
      </div>
    );
  }
}

ServicesInfo 是子組件。 這是家長...

   export default class InfoHolder extends React.Component {
    constructor(props) {
      super(props) {
    }
render() {
  return(
     <div>
       <p>Here is a listing of the nodes:</p>
       <ServicesInfo />
     </div>
    )
  }

一個沒有文本的項目符號正在返回。 我已經在這個項目中工作了大約 16 個小時，我認為我只是缺少一些簡單的東西。 請幫忙！

Answer 1

在組件中傳遞您的數組。 還要添加constructor(props){ super(props) {}以從其他組件獲取 props。

export default class InfoHolder extends React.Component {
    constructor(props) {
      super(props) {
  this.state={
objectArray =[{device_id: "nlab5320a", port_id: "XGigabitEthernet0/0/3"}]     
}
    }
render() {
  return(
     <div>
       <p>Here is a listing of the nodes:</p>
       <ServicesInfo activePath={this.state.object} />
     </div>
    )
  }


    export default class ServicesInfo extends React.Component {
    constructor(props) {
          super(props) {
        }

  render() {
    const { activePath } = this.props;
    const runTable = activePath.map((item, i) => (
      <li key={i}>{item.device_id}</li>
    ));

    return (
      <div>
        <ul>{runTable}</ul>
      </div>
    );
  }
}

Answer 2

在InfoHolder您沒有將activePath作為道具傳遞給ServicesInfo組件。 您必須像這樣傳遞activePath ： <ServicesInfo activePath={activePath} />

代碼沙盒