javascript - 使用LoDash链和 map 创建组件。 .map 中的 QuoteSlides 未定义

Question

我正在尝试从 quoteList 数组的过滤值创建一个 React 组件。 .filter() 按预期工作，但 .map(QuoteSlides=> 中的 QuoteSlides 变量未定义。数组 QuoteSlides 将只有 1 个元素。

let quoteList = shipment.quotes
const QuoteSlides = _
.chain(quoteList)
.filter(['state', 'accepted'])
.map((QuoteSlides) => {
  <div key={`quote${QuoteSlides.id}`}>
    <p>{QuoteSlides.amount}</p>
  </div>
})
.value();

简化版本的shipment.quotes =

[{id: 1, state:'accepted', amount: 1000},{id:2, state:'pass', amount: 500}]

Answer 1

2个问题，一个过滤器接受一个列表(已经在链上下文中)和谓词函数...第二个问题你需要返回map的结果，看看以防万一仍然不清楚...我也刚刚重命名你的临时变量(这样看起来好多了):

class App extends React.Component {

    render(){
    
    let quoteList = [{id: 1, state:'accepted', amount: 1000},{id:2, state:'pass', amount: 500}];
    const QuoteSlides = _.chain(quoteList)
                .filter((quote)=> (quote.state == 'accepted'))
                .map((quote) => (
                   <div key={`quote${quote.id}`}>
                     <p>{quote.amount}</p>
                   </div>
                   )).value();
    
      return <div>
        <h1>Test concept </h1>
        {QuoteSlides}
        
      </div>
    }

}

ReactDOM.render(<App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>


<div id='root'>
</div>