Question

我一直在尝试使用React和REST API进行应用开发。我有一个wordpress网站，我正在使用WP Rest API。我成功地从我想要的类别中获取了所有帖子。我希望能够根据该数据显示结果的不同视图/过滤器，但我不想重做每个过滤器的获取，因为所有数据都是从第一个GET请求中检索的。

我的问题是如何将json响应作为对象或某物存储在某处，以便当用户点击过滤器时（例如，仅显示2017年的帖子），程序将遍历已经获取的对象曾经，只提取2017年的那些。

目前我拥有我想要的功能，但我在fetch的成功回调中对所有可能的列表视图进行了“硬编码”。所以我创建了所有可能的列表，然后我的按钮只在每个列表之间来回切换。对我来说，这似乎并不“正确”，我认为不会在一个地方进行所有迭代，而是在用户选择过滤器时更快。在下面，您可以看到处理请求和列表显示的模块的代码。这是在React中完成的。

关于如何处理这种情况的任何建议都是受欢迎的，即使它最终是因为我这样做是最好的方法！感谢

import React from 'react';
import Ebook from './Ebook';


class EbookList extends React.Component {

constructor(props){
    super(props);
    this.state = {
        allPosts : [],
        revista : [],
        boletin: [],
        filterBy : 'revista'
    }

    this.fetchPosts = this.fetchPosts.bind(this);
    this.filterList = this.filterList.bind(this);
    this.handleClick = this.handleClick.bind(this);
    //this.renderSomething = this.renderSomething.bind(this);
}
fetchPosts(){

    const url = 'https://cipm.org.mx/wp-json/wp/v2/posts?categories=15&per_page=50';

    fetch(url).then(response => {
      if(response.ok){
        return response.json();

      }
      throw new Error('Fetch failed');

    },networkError=>console.log(networkError.message)).then(
    responseJson=>{

      console.log(responseJson.length);

      let postList = responseJson.map(post => {
        // console.log(post.date);
       return <Ebook ebookData={post} key={post.id} />
      });

      let boletinList = responseJson.map(post => {
        //tag 17 is revista
        //tag 16 is boletin
        if(post.tags.includes(16)){
            return <Ebook ebookData={post} key={post.id} />
        } return null;
      });

      let revistaList = responseJson.map(post => {
        //tag 17 is revista
        //tag 16 is boletin
        if(post.tags.includes(17)){
            return <Ebook ebookData={post} key={post.id} />
        }return null;
      });
      let yearList = responseJson.map(post=>{
        if(post.date===2018){
            return <Ebook ebookData={post} key={post.id} />
        }return null;
      })
       this.setState({
        allPosts:postList,
        boletin:boletinList,
        revista:revistaList,
        year: yearList
       });
       // console.log("the state object: " + this.state.jsonObject[0]);
       console.log(responseJson);
       console.log(postList);



    });
}

filterList(){
    if(this.state.filterBy === 'boletin'){
        return this.state.boletin;

    } else if (this.state.filterBy === 'revista'){
        return this.state.revista;
    } else if (this.state.filterBy === 'viewAll'){
        return this.state.allPosts;
    }
}

handleClick(event){

    this.setState({filterBy:event.target.value});
}
componentDidMount(){
    this.fetchPosts();
 }


render(){
    // {this.props.dataObject.map(ebook =>{
        //  return <Ebook ebookData={ebook} />
        //  })}
    return (
        <div className="ebookList-container">
            <div className="ebookList-controls">
                <button onClick={this.handleClick} value='viewAll' >Todos</button>
                <button onClick={this.handleClick} value='boletin'>Boletin</button>
                <button onClick={this.handleClick} value='revista'>Revista</button>
            </div>
            <div className="ebookList-container">
                {this.filterList()}
            </div>
        </div>  
    );
}
}

export default EbookList;

Answer 1

我猜你可以在fetch方法中存储allPosts并在filterList方法中实现过滤算法

这样的事情应该有效

filterList = () => {
    if(this.state.filterBy === 'boletin'){
        return getBoletin(this.state.allPosts);
    } else if (this.state.filterBy === 'revista'){
        return getRevista(this.state.allPosts);
    } else if (this.state.filterBy === 'viewAll'){
        return this.state.allPosts;
    }
}

getBoletin = (posts) => {
    return posts.map(post => {
    //tag 17 is revista
    //tag 16 is boletin
    if(post.tags.includes(16)){
        return <Ebook ebookData={post} key={post.id} />
    } return null;
  });
}

getRevista = (posts) => {
    return posts.map(post => {
    //tag 17 is revista
    //tag 16 is boletin
    if(post.tags.includes(17)){
        return <Ebook ebookData={post} key={post.id} />
    }return null;
  });
}

....

从REST API获取并存储json响应以进一步过滤数据

1 个答案: