反应：从无状态组件返回迭代列表

Question

运行此代码时，出现错误：

意外的令牌，预期的，

我正在做的就是在数组上调用map方法：

const Available = ({prod}) => {
    let keys = Object.keys(prod)
    var filtered = keys.filter((item, index) => prod[item])
    return (
        {
            filtered.map((item, index) => {
            return <li><a>{item}</a></li>
        })
}
    )

}

Available.defaultProps = {
    Prod: {
        nuts: true,
        bolts: true,
        wiper: false,
        discbreak: true
    }
}

const Drop = (props) => {
    var style = {
        display: 'block'
    }
    if (props.isOpen) {
        return (
            <ul className="dropdown-menu" style={style}>
                <Available />
            </ul>
        )
    } else {
        return false
    }
}

我什至尝试将“可用”组件更改为如下所示。

const AvailableProducts = ({products}) => {
  debugger;
  let keys = Object.keys(products);
  var filtered = keys.filter((item,index)=>products[item]);

  filtered.map((item,index)=>{
    return <li><a>{item}</a></li>
  })
}

现在我最终得到错误：

必须返回有效的React元素（或null）。 您可能返回了undefined，数组或其他无效对象。

我在哪里做错了？ 有人可以帮忙吗？

Answer 1

在第二个代码中，您没有返回任何内容，因此react引发了“有效的React元素...”错误。 由于filtered是一个数组，因此您应该在div中返回已过滤的变量，并且应该能够看到没有错误的组件。

const AvailableProducts = ({products}) => {
  debugger;
  let keys = Object.keys(products);
  var filtered = keys.filter((item,index)=>products[item]);

  filtered = filtered.map((item,index)=>{
    return <li><a>{item}</a></li>
  });
  return <div>{filtered}</div>
}

Answer 2

尝试这个：

const Available = ({prod}) => {
  let keys = Object.keys(prod);
  var filtered = keys.filter((item)=>prod[item]);
  return (
    <div>
      {filtered.map((item)=><li><a>{item}</a></li>)}
    </div>
  );
}

您应该返回一个有效的React组件（或null）。

参考： https : //facebook.github.io/react/docs/react-component.html#render