React首次加载数据未渲染，需点击筛选按钮才显示问题求助

问题分析 #

你的问题根源有两个：

1. 初始状态未同步：category的初始值是loadedMovies（空数组），当fetch完成并更新loadedMovies后，category并没有随之更新，所以初始渲染时MoviesList拿到的是空数组。
2. "全部"按钮逻辑隐患：当前点击"All"按钮时，会筛选category等于"All"的电影，但如果你的电影数据里没有category为"All"的条目，这个逻辑其实是错误的（只是你可能刚好有这类数据才暂时正常）。

修复方案 #

1. 初始化category为全部数据

在数据获取完成后，直接将category设置为所有电影数据，确保初始加载时显示全部内容：

.then(data => {
  const movies = [];
  for (const key in data){
    const movie = {
      id: key,
      ...data[key]
    };
    movies.push(movie);
  }
  setIsLoading(false);
  setLoadedMovies(movies);
  setCategory(movies); // 新增：初始加载时显示全部电影
});

2. 修正"全部"按钮的筛选逻辑

修改eventCategoryClick函数，当点击"All"时直接返回所有电影，而非按category筛选：

function eventCategoryClick(e){
  const nameSelecion = e.currentTarget.textContent;
  let filtered;
  if (nameSelecion === "All") {
    filtered = loadedMovies; // 点击"全部"时展示所有电影
  } else {
    filtered = loadedMovies.filter((item) => item.category === nameSelecion);
  }
  setCategory(filtered);
}

完整修复后的代码 #

function AllMovies(){

  const [isloading, setIsLoading] = useState(true);
  const [loadedMovies, setLoadedMovies] = useState([]);
  const [category, setCategory] = useState([]);

  useEffect(() => {
    setIsLoading(true);

    fetch('https://movies.json')
    .then(response => response.json())
    .then(data => {
      const movies = [];
      for (const key in data){
        const movie = {
          id: key,
          ...data[key]
        };
        movies.push(movie);
      }
      setIsLoading(false);
      setLoadedMovies(movies);
      setCategory(movies); // 初始加载时设置为全部数据
    });

  }, []);


  function eventCategoryClick(e){
    const nameSelecion = e.currentTarget.textContent;
    let filtered;
    if (nameSelecion === "All") {
      filtered = loadedMovies;
    } else {
      filtered = loadedMovies.filter((item) => item.category === nameSelecion);
    }
    setCategory(filtered);
  }

  if(isloading){
    return (
      <div><Spinner animation="border" variant="danger" /></div>
    );
  }

  return (
    <div>
      <h1>New Release</h1>
      <CoverMovieList movies={loadedMovies} />
      <h2>All Movies</h2>
      <div className="filterContainer">
        <Button className="filterBtn" variant="outline-warning" onClick={eventCategoryClick}>All</Button>
        <Button className="filterBtn" variant="outline-warning" onClick={eventCategoryClick}>Action</Button>
        <Button className="filterBtn" variant="outline-warning" onClick={eventCategoryClick}>Family</Button>
        <Button className="filterBtn" variant="outline-warning" onClick={eventCategoryClick}>Fantasy</Button>
        <Button className="filterBtn" variant="outline-warning" onClick={eventCategoryClick}>Horror</Button>
      </div>
      <MoviesList movies={category} />
    </div>
  )
}

export default AllMovies;

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