时间戳

首页 > 解决方案 > 反应为什么这个简单的数组映射函数没有返回任何东西？

arrays - 反应为什么这个简单的数组映射函数没有返回任何东西？

问题描述

我有一个 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 个小时，并且认为我只是缺少一些简单的东西。请帮忙！

标签： arraysreactjs

解决方案

在组件中传递您的数组。还添加constructor(props){ super(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>
    );
  }
}

推荐阅读