反應：從無狀態組件返回迭代列表

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