Javascript React：从无状态组件返回迭代列表

当我运行此代码时，我得到错误：

意外标记，应为

我所做的只是在数组上调用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 Available=（{prod}）=>{
让keys=Object.keys（prod）
var filtered=keys.filter（（项目，索引）=>prod[item]）
返回(
{
已筛选的.map（（项目，索引）=>{
返回
{item}
})
}
)
}
Available.defaultProps={
产品：{
坚果：没错，
博尔特：是的，
雨刮器：错，
discbreak：是的
}
}
常量下降=（道具）=>{
变量样式={
显示：“块”
}
if（等参道具）{
返回(


)
}否则{
返回错误
}
}

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

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

const AvailableProducts=（{products}）=>{
调试器；
让keys=Object.keys（产品）；
var filtered=keys.filter（（项目，索引）=>products[item]）；
已筛选的.map（（项目，索引）=>{
返回
{item}
})
}

现在我得到了一个错误：

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

---

我哪里做错了？有人能帮上忙吗？

在第二段代码中，您没有返回任何内容，因此react抛出“一个有效的react元素…”错误。由于filtered是一个数组，所以应该在div中返回filtered变量，并且应该能够看到没有错误的组件

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

const AvailableProducts=（{products}）=>{
调试器；
让keys=Object.keys（产品）；
var filtered=keys.filter（（项目，索引）=>products[item]）；
filtered=filtered.map（（项目、索引）=>{
返回
{item}
});
返回{filtered}
}

在第二个代码中，您没有返回任何内容，因此react抛出“有效的react元素…”错误。由于filtered是一个数组，所以应该在div中返回filtered变量，并且应该能够看到没有错误的组件

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

const AvailableProducts=（{products}）=>{
调试器；
让keys=Object.keys（产品）；
var filtered=keys.filter（（项目，索引）=>products[item]）；
filtered=filtered.map（（项目、索引）=>{
返回
{item}
});
返回{filtered}
}

试试这个：

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>
  );
}

const Available=（{prod}）=>{
让keys=Object.keys（prod）；
var filtered=keys.filter（（项目）=>prod[item]）；
返回(
{filtered.map（（项）=>
尝试以下操作：

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>
  );
}

const Available=（{prod}）=>{
让keys=Object.keys（prod）；
var filtered=keys.filter（（项目）=>prod[item]）；
返回(
{filtered.map（（item）=>
尝试将
.map（）
包装在
div
中，这是因为可用组件返回如下数组：
[
{item}
，
{item}
，
{item}
]
您必须返回一个react组件或null..例如：
任何人都可以解释，prod值将从何而来--const Available=（{prod}）=>{@MukulSharma:它来自propTypes，语法是新的，符合ES6。它被称为“破坏赋值”。有关更多信息，请尝试将
.map（）
包装在
div
中，这是因为可用组件返回如下数组：
[
{item}
，
{item}
，
{item}
，
{item}
]
您必须返回一个react组件或null..例如：
任何人都可以解释，prod值将从何处出现在代码中--const Available=（{prod}）=>{@MukulSharma:它来自propTypes，语法是新的，它与ES6相同。它被称为“Destructing Assignment”。有关更多信息，