Ramadを使用してsetStateに反応する

Question

私はフィルタリングにramdaを使用しようとしています。私はRamdaのドキュメントを詳しく読んだ。

しかし、フィルターをかけようとしたところ、私のsetStateやコンソールログには何の影響もありません。

ライブコードサンプル：

https://codesandbox.io/s/qY219X102

私の試み：

import React from 'react'; 
import { render } from 'react-dom'; 
import R from 'ramda'; 

const o = { 
    movies: [ 
    { name: 'movie 1', genres: ['comedy', 'action'] }, 
    { name: 'movie 2', genres: ['action', 'drama'] }, 
    { name: 'movie 3', genres: ['drama', 'action'] }, 
    ], 
}; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     movies: o, 
    }; 
    } 
    getGenre =() => { 
    R.pipe(
     R.prop(o.movies), 
     R.filter(
     R.and(
      R.propSatisfies(R.find(R.equals('action')), 'genres'), 
      R.propSatisfies(R.find(R.equals('comedy')), 'genres'), 
     ), 
    ), 
    ); 
    this.setState({ o }); 
    console.log('genre', o); 
    }; 
    render() { 
    const rawmovies = Object.keys(o).map(e => o[e]); 
    const movies = [].concat.apply([], rawmovies); 
    return (
     <div> 
     <button onClick={this.getGenre}>Action genre</button> 
     {movies.map(e => <span key={e.name}> {e.name}</span>)} 
     </div> 
    ); 
    } 
} 

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

Answer 1

は、実際のフィルタリング自体として、私はこのRAMDAが読みはるかに簡単スニペットを見つける：あなたはRamda REPLにこの動作を確認することができます

filter(both(
    where({genres: contains('drama')}), 
    where({genres: contains('action')})  
)) 

。 Ramda siteには、いつでもfilter、both、where、containsのドキュメントが表示されます。

Answer 2

私はあなたのコードをチェックして、いくつかの変更を行い、フィルタリングできるようにする：私の場合

import React from 'react'; 
import { render } from 'react-dom'; 
import R from 'ramda'; 

const o = { 
    movies: [ 
    { name: 'movie 1', genres: ['comedy', 'action'] }, 
    { name: 'movie 2', genres: ['action', 'drama'] }, 
    { name: 'movie 3', genres: ['drama', 'action'] }, 
    ], 
}; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     movies: o.movies, 
    }; 
    } 
    getGenre =() => {  
    const filter = R.pipe(
     R.prop('movies'), 
     R.filter(
     R.and(
      R.propSatisfies(R.find(R.equals('action')), 'genres'), 
      R.propSatisfies(R.find(R.equals('comedy')), 'genres'), 
     ), 
    ), 
    ); 
    const result = filter(o);   
    this.setState({ movies: result });  
    }; 
    render() {    
    return (
     <div> 
     <button onClick={this.getGenre}>Action genre</button> 
     {this.state.movies.map(e => <span key={e.name}> {e.name}</span>)} 
     </div> 
    ); 
    } 
} 

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

申し訳ありませんがあなたの質問を正しく得られませんでした。

ラムダは関数を返し、その関数をフィルタリングに格納して使用していないということです。

また、レンダリング方法では、あなたはその状態で映画を使用していませんでした。