使用Ramda傳遞陣列與React

Question

我想使用哪些值處於Ramda函數內的「狀態」。這將起到類似於「AND」過濾器的作用。所以它可能會收到1個值或幾個值。

如何將數據從組件傳遞到此ramda函數？

它如何循環'ramda'來添加它們在狀態中設置的值？

我把它添加到codepen也：https://codesandbox.io/s/3OGK2pP9

const AndFilter = pipe(
    prop('movies'), 
    filter(
    both(
    // Example data to show how it should arrive from the react component. 
     where({ genres: pipe(pluck('name'), contains('foo')) }), 
     where({ genres: pipe(pluck('name'), contains('bar')) }), 
     where({ genres: pipe(pluck('name'), contains('baz')) }), 
    ), 
), 
); 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     movies: dataTest, 
     selectedFilters: { foo, bar, baz }, 
    }; 
    } 
    AndFilter =() => { 
    this.setState({ movies: AndFilter(x) }); 
    }; 
    render() { 
    return (
     <div> 
     <button onClick={this.AndFilter}>test</button> 
     {this.state.movies.map(movies => (
      <li key={movies.id}> {movies.name} </li> 
     ))} 
     </div> 
    ); 
    } 
} 

Answer 1

這可能愚蠢的答案，但爲什麼不通過你的函數的引用部分道具，像這樣：

constructor(props) { 
    super(props); 
    this.AndFilter=this.AndFilter.bind(this); 
    this.state = { 
     movies: [{"name":"foo"}, {"name":"bar"},{"name":"baz"}], 
     selectedFilters: {}, 
    }; 
    } 

AndFilter(){ 
    this.setState({movies:this.props.AndFilter(this.state)}); 
} 
____________________ 
let props={ 
    AndFilter:AndFilter, 
    .... 
} 

<MyComponent {...props}> 

編輯：

對不起，我沒有看你的功能，我想如何將它傳遞給組件，你可能會問意思是：

const AndFilter = pipe(
    prop('movies'), 
    filter(
    allPass(
     [propEq('name','foo')] 
    ) 
), 
); 

或所示（這裏比較的比較函數排列）：

const AndFilter = curry( 
    (comparators) => 
     pipe(
      prop('movies'), 
      filter(
       allPass(
       comparators 
       ) 
      ), 
     ) 
);  

您可以生成你的組件比較，我也忘了安裝監聽器，看看這裏https://codesandbox.io/s/pO8yWXM2，當你點擊在div上它會過濾除了通過謂詞的人之外的所有人。