javascript - 未登录的用户看不到创建帖子按钮/发送消息按钮的帮助

Question

我目前正在尝试设置创建帖子和发送消息按钮，只有在您是登录用户时才可见，我已经尝试了很多东西，但我最终不得不恢复到我拥有的基本代码按钮确实起作用，任何指导将不胜感激。

编辑 ::: 意识到我发布了错误的片段来呈现新的发布按钮。

这是新发布按钮的代码：

import React from 'react';
import { useState, useEffect } from 'react';
import { fetchPosts, getCurrentToken } from '../api';
import { Link } from 'react-router-dom';
import Post from './Post';
import SearchBar from './SearchBar'


const Posts = ({ setPosts, posts }) => {

    const [searchPosts, setSearchPosts] = useState([]);

    useEffect(() => {
        fetchPosts(getCurrentToken())
        .then(({data}) => {
            setPosts(data.posts)
            setSearchPosts(data.posts)
        } )
    }, [])

    
    console.log(posts);

    const onSearchPosts = (searchTerm) => {
        setSearchPosts(posts.filter((post) => {
            const postName = post.title.toLowerCase();
            return postName.includes(searchTerm.toLowerCase());
        }))
    };
    
    return ( 
        <div> 
            <h1 className="Posts">Posts</h1>
            <SearchBar onSearchPosts={onSearchPosts}/>
            <Link to='/createpost'><button className="button">New Post</button></Link>
            {searchPosts.map((post, index) => <Post key={index} post={post}></Post>)}
        </div>
    )
}

export default Posts;

标签： javascriptreactjs

Answer 1

首先，您需要一种方法来确定用户是否登录。仅从您在此处发布的建议的片段中就很难确定您是否都准备好了。

请参阅片段开始。

import React from 'react';
import { useState, useEffect } from 'react';
import { fetchPosts, getCurrentToken } from '../api';
import { Link } from 'react-router-dom';
import Post from './Post';
import SearchBar from './SearchBar'

const isLoggedIn => () => {
  // code that determines if the user is logged in and return true or false
}

const Posts = ({ setPosts, posts }) => {

    const [searchPosts, setSearchPosts] = useState([]);
    
    useEffect(() => {
        fetchPosts(getCurrentToken())
        .then(({data}) => {
            setPosts(data.posts)
            setSearchPosts(data.posts)
        } )
    }, [])

    
    console.log(posts);

    const onSearchPosts = (searchTerm) => {
        setSearchPosts(posts.filter((post) => {
            const postName = post.title.toLowerCase();
            return postName.includes(searchTerm.toLowerCase());
        }))
    };
    
    return ( 
        <div> 
            <h1 className="Posts">Posts</h1>
            <SearchBar onSearchPosts={onSearchPosts}/>
            {isLoggedIn && (
              <Link to='/createpost'><button className="button">New Post</button></Link>
            )}
            {searchPosts.map((post, index) => <Post key={index} post={post}></Post>)}
        </div>
    )
}

export default Posts;