Question

我正在尝试使用ramda进行过滤。我已经详细阅读了Ramda文档。

但是，我尝试过滤它对我的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'));

Answer 1

至于实际的过滤本身，我发现这个Ramda片段更容易阅读：

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

您可以在 Ramda REPL 上查看此操作。您始终可以在filter上查看both，where，contains和Ramda site的文档。

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

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

事情是Ramda返回一个函数而你没有存储并使用该函数进行过滤。

同样在渲染方法中，你没有在州内使用电影。

使用Ramda和React来设置state

2 个答案: