React组件分类筛选按钮需两次点击触发问题求助

从数据库获取带分类属性的Notes数组，实现了分类筛选按钮用于渲染对应分类的笔记，但点击筛选按钮时filterNotes()函数仅在第二次点击才触发。怀疑和两次调用setState()或布尔状态有关，尝试多种组合仍无法实现首次点击触发。

CreateArea 代码 #

import React, { useState, useEffect } from "react";
import Header from "./Header";
import Footer from "./Footer";
import ListCategories from "./ListCategories";
import Note from "./Note";
import axios from "axios"

function CreateArea(props) {
const [isExpanded, setExpanded] = useState(false);
const [categories, setCategories] = useState([])
const [notes, setNotes] = useState([])
const [fetchB, setFetch] = useState(true)
const [filterOn, setFilter] = useState(false)

const [note, setNote] = useState({
  title: "",
  content: "",
  category: ''
    });

useEffect(() => {
  fetch('http://localhost:5000/categories')
  .then(res => res.json())
  .then(json => setCategories(json))
}, [])


useEffect(() => {
  if(fetchB) {
    fetch('http://localhost:5000/notes')
    .then(res => res.json())
    .then(json => {
      console.log(json)
      setNotes(json)
      setFetch(false)
    })
  }
}, [fetchB])

function handleChange(event) {
const { name, value } = event.target;
console.log("handleChange called")
setNote(prevNote => {
return {
        ...prevNote,
        [name]: value
      };
    });
  }

function submitNote(e){
      e.preventDefault();
      axios.post("http://localhost:5000/notes/add-note", note)
           .then((res) => {
      setNote({
      category: '',
      title: "",
      content: ""
              })
      setFetch(true)
      console.log("Note added successfully");
      console.log(note)
            })
            .catch((err) => {
      console.log("Error couldn't create Note");
      console.log(err.message);
            });

        }


    function expand() {
    setExpanded(true);
      }

    function filterNotes(category){
        if(filterOn){
          fetch('http://localhost:5000/notes')
          .then(res => res.json())
          .then(json => {
            console.log("filter notes")
            setNotes(json)
            setNotes(prevNotes => {
              console.log("setNotes called with category " + category)
              return prevNotes.filter((noteItem) => {
                return noteItem.category === category;
              });
            });
            setFilter(false)
          })
        }   
    }

    
      return (
      <div>
          <Header/>
          <ListCategories categories={categories} notes={notes} filterNotes={filterNotes} setFilter={setFilter} filterOn={filterOn} setFetch={setFetch}/>
            <form className="create-note">
      {isExpanded && (
                <input
      name="title"
      onChange={handleChange}
      value={note.title}
      placeholder="Title"
      />
              )}
              <textarea
      name="content"
      onClick={expand}
      onChange={handleChange}
      value={note.content}
      placeholder="Take a note..."
      rows={isExpanded ? 3 : 1}
      />
                <select
                name="category"
      onChange={handleChange}
      value={note.category}>
      {
                      categories.map(function(cat) {
      return <option
      key={cat.category} value={cat.value} > {cat.category} </option>;
                      })
      }
      </select>

              <button onClick={submitNote}>Add</button>
      </form>

      <Note notes={notes} setFetch={setFetch}/>
            <Footer/>
            <button onClick={()=>{setFetch(true)}}>All</button>
      </div>
        );
      }
export default CreateArea;

ListCategories 代码 #

import React, { useState } from "react";
import CreateCategory from "./CreateCategory";

export default function ListCategories(props) {

    function handleClick(category){
        props.setFilter(true)
        props.filterNotes(category)
    }
 
    return (
        <div className="category-group">
        <CreateCategory/>
        <div className="btn-group">
        {props.categories.map((categoryItem, index) =>{
             return(
                <button onClick={() => {handleClick(categoryItem.category)}}>{categoryItem.category}</button>
        )
    })}
        </div>
        </div>
    )
    }

核心问题原因 #

点击筛选按钮时，handleClick先调用setFilter(true)，紧接着执行filterNotes，但React的状态更新是异步的，此时filterOn仍为初始的false，导致filterNotes内的筛选逻辑不执行；第二次点击时filterOn已更新为true，才会触发筛选。

修复步骤 #

1. 移除冗余的filterOn状态
   不需要用布尔状态控制筛选触发，直接简化筛选逻辑。

2. 修改filterNotes函数（二选一）

   • 方案一：基于前端已有的全量笔记直接筛选（无需重新请求后端）

     function filterNotes(category){
         setNotes(prevNotes => prevNotes.filter(noteItem => noteItem.category === category));
     }
     

   • 方案二：后端新增分类查询接口，直接请求筛选后的数据（推荐，减少前端计算压力）

     function filterNotes(category){
         fetch(`http://localhost:5000/notes?category=${category}`)
         .then(res => res.json())
         .then(filteredNotes => setNotes(filteredNotes));
     }
     

3. 简化ListCategories的handleClick
   去掉不必要的setFilter调用，直接触发筛选：

   function handleClick(category){
       props.filterNotes(category);
   }
   

4. 优化"All"按钮逻辑
   点击时直接重新获取全量笔记：

   <button onClick={()=>{
       fetch('http://localhost:5000/notes')
       .then(res => res.json())
       .then(json => setNotes(json));
   }}>All</button>
   

数据获取最佳实践建议 #

• 避免重复请求：当前fetchB状态用于控制首次和新增后的全量数据获取，该逻辑可保留，但筛选时无需重新请求全量数据再过滤，直接请求带分类参数的接口更高效。
• 缓存全量数据：如果需要频繁切换筛选/全量视图，可将首次获取的全量笔记存入单独状态（如allNotes），筛选时直接基于缓存数据处理：

  // 新增缓存状态
  const [allNotes, setAllNotes] = useState([]);
  
  // 修改全量数据获取逻辑
  useEffect(() => {
    if(fetchB) {
      fetch('http://localhost:5000/notes')
      .then(res => res.json())
      .then(json => {
        setNotes(json);
        setAllNotes(json); // 缓存全量数据
        setFetch(false);
      })
    }
  }, [fetchB])
  
  // 筛选时使用缓存数据
  function filterNotes(category){
      setNotes(allNotes.filter(noteItem => noteItem.category === category));
  }
  

• 使用数据管理库：推荐使用React Query或SWR，这类库可自动处理缓存、重复请求、状态同步等问题，减少手动维护fetchB这类状态的工作量。

内容的提问来源于stack exchange，提问作者01nowicj