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) {}来从其他组件中获取道具。

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} />

Codesandbox

React为什么这个简单的数组映射函数不返回任何东西？

2 个答案: