使用Ramda和React设置状态

我正在尝试使用ramda进行过滤。我已经详细阅读了Ramda文档。使用Ramda和React设置状态

但是，我试图过滤它对我的setState以及控制台日志没有任何影响。

直播代码示例：

我尝试：

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'));

来源

2017-05-29 Ycon

至于实际的过滤本身，我觉得这Ramda片断更容易阅读：

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

你可以看到在行动本就Ramda REPL。你可以在Ramda site上看到filter,both,where和contains的文档。

来源

2017-05-29 16:49:25

谢谢你，更加整洁。如何在嵌套时获得“流派”的价值？ EG：'类型：[{name：'Movie'，type：1}，{name：'Adventure'，type：2}]，}，'？ – Ycon

我可能会这样做：'R.where（{genres：R.pipe（R.pluck（'name'），R.contains（'drama'））}'，或者将它解压缩到一个函数中，这样我可以写'R.where（{genres：hasType（'drama'）}）'。这不是最有效的代码，但是我只会担心它会导致问题。 –

我尝试了第一个选项，但没有成功，我把它放在一个codepen中向你展示 - https://codesandbox.io/s/DkNzqx7Wn – Ycon

我检查你的代码，并进行一些修改，以允许过滤：

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'));

很抱歉，如果我没有得到你的问题。

事情是，拉姆达返回一个函数，你没有存储和使用该功能的过滤。

另外在渲染方法中，您并未在状态中使用电影。

来源

2017-05-29 16:18:49

使用Ramda和React设置状态

回答

相关问题