React 过滤器发布 firebase

Question

遇到一个问题，当您切换到一个帖子页面时，所有帖子都被隐藏并且只有在按下按钮时才会隐藏

`<li  onClick={()=> setFiltered(posts)}><a>All</a><span></span></li>`

显示所有帖子，尽管当您转到该页面时应立即显示所有帖子。但是过滤器工作正常，请你指出我在哪里犯了错误，如果有的话我从 firebase

输出帖子

函数

const [posts, setPosts] = useState([]);
    const [filtered, setFiltered] = useState([]);
    const postsCollectionRef = collection(db , "posts");

    const menuItems = [...new Set(posts.map((Val) => Val.category))];

    useEffect(() => {
       
        const getPosts = async () => {
            const data = await getDocs(postsCollectionRef);
            setPosts(data.docs.map((doc) => ({...doc.data(), id: doc.id})));
            setFiltered(posts);
        }

        getPosts();
       }, [])
   
    // filter function  
    const filterItem = (category) => {
        
        const newItem = posts.filter(newVal =>  newVal.category === category);
        setFiltered(newItem);
    };

按钮类别

<li  onClick={()=> setFiltered(posts)}><a>All</a><span></span></li>
  {
   menuItems.map((Val, id)=>{
   return <li key={id} onClick={()=> filterItem(Val)}><a>{Val}</a><span></span></li>
    })}

输出帖子

<div className="gallery-row">
  {
    filtered.map((posts, i) => {
    return( <Link key={i} to={'/product/' + posts.id}>Post</Link>)
    })}                    
</div>

Answer 1

在useEffect内部调用setFiltered时，posts的值还是[]的初始值。您遇到的问题称为过时关闭。

在许多情况下，这可以通过将陈旧值添加到 useEffect 的依赖项数组来解决，但在您的情况下，这会造成无限循环。

根据您的代码，最简单的解决方案如下：

useEffect(() => {
       
  const getPosts = async () => {
    const data = await getDocs(postsCollectionRef);
    const posts = data.docs.map((doc) => ({...doc.data(), id: doc.id}));
    setPosts(posts);
    setFiltered(posts);
  }

  getPosts();
}, [])

React 过滤器发布 firebase

React filter posts firebase

javascript

filter

firebase

reactjs