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元素......＆＃34;错误。由于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

React：从无状态组件

2 个答案: