Реагировать на выбор конкретных элементов из базы данных - PullRequest
Новая
       53

Реагировать на выбор конкретных элементов из базы данных

0 голосов
/ 11 июля 2020

Попытка назначить определенные данные API (только автор: Майк) для компонента блога. Проблема здесь. Однако с использованием PropTypes. Просто хочу сделать только автора: Майк данные для BlogScreen const. 

import React from 'react';
import PropTypes from 'prop-types';


import styles from './BlogScreen.module.scss';


const BlogScreen = ({ data }) => {
  if (!data) {
    return (<Spinner />);
  }


  const { blog, author, posts } = data;

  return (
    <main>
      <BlogHeader name={blog.name} description={blog.description} />
      <PreContent />
      <div className={styles.posts}>
        {
          posts.map((post) => (
            <PostPreview post={post} author={author} key={post.id} />
          ))
        }
      </div>
      <Footing />
    </main>
  );
};

BlogScreen.defaultProps = {
  data: null,
};

BlogScreen.propTypes = {
  data: PropTypes.object,
};

export default BlogScreen;

Ответы [ 2 ]

2 голосов
/ 11 июля 2020

Выбор определенных элементов из базы данных не входит в обязанности веб-интерфейса. У вас должна быть конечная точка в вашем бэкэнде, которая принимает authorName в качестве параметра и возвращает blogPosts этого автора. Затем вы передаете в компонент BlogScreen только данные об авторе, которого хотите. Вы не можете загрузить все сообщения в базу данных и выполнить фильтрацию во внешнем интерфейсе.

0 голосов
/ 11 июля 2020 
    const BlogScreen = ({ data, approvedAuthor }) => {
      if (!data) {
        return (<Spinner />);
      }
    
      if (data.author !== approvedAuthor) return null;
    
      const { blog, author, posts } = data;
    
      return (
        <main>
          <BlogHeader name={blog.name} description={blog.description} />
          <PreContent />
          <div className={styles.posts}>
            {
              posts.map((post) => (
                <PostPreview post={post} author={author} key={post.id} />
              ))
            }
          </div>
          <Footing />
        </main>
      );
    };    
  

  BlogScreen.defaultProps = {
    data: null,
    approvedAuthor: 'Mike',
  };
    
  BlogScreen.propTypes = {
    data: PropTypes.object
    approvedAuthor: PropTypes.string,
  };
...