javascript - react : Returning iterated list from a stateless component

Question

当我运行这段代码时，出现错误:

unexpected token, expected ,

我所做的只是在数组上调用 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>
  })
}

现在我最终得到错误:

A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

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

Answer 1

在你的第二个代码中，你没有返回任何东西，因此 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>
}