问反应切换“显示所有”和“显示赢家”不起作用

EN

const MovieList = () => {    
    // Get Movies
  const [movies, setMovies] = useState([])
  const [winner, filterWinner] = useState(false)

    const fetchMovies = async () => {
    const res = await fetch('http://localhost:5000/data')
    const data = await res.json()
    return data
        
    }

    useEffect(() => { 
    const getMovies = async () => {
      const moviesFromServer = await fetchMovies()
        setMovies(moviesFromServer)

    }
    getMovies()
    }, [])

   
    //toggle between setting movies to all movies and winner movies.
    //movie is an object that has a key and value pair "winner" : "True" or "winner" : "False"
    const toggleWinner = () => {
      filterWinner(!winner)
      if (winner === true) {
        const winners = movies.filter((movie) => movie.winner === 'True');
        setMovies(winners);
      } else {
        setMovies(movies);
      }
  }
    
    return (
      
    <div className="container">
      <h1>Movies</h1>
        <hr />
        <div>
          <Button onClick={toggleWinner} color="info">{winner ? "Show All" : "Show Winners"}</Button>
        </div>
            
      <div>
        <table className="table table-bordered table-striped">
          <thead className="thead-dark">
            <tr>
              <th>Year</th>
              <th>Film Name</th>
              <th>Oscar Winner</th>
              <th>Country</th>
            </tr>
          </thead>
          <tbody>
                {movies.map(movie => (
                <tr key={movie.id}>
                <td>{movie.year}</td>
                <td>{movie.filmName}</td>
                <td>{movie.winner}</td>
                <td>{movie.country}</td>
            </tr>
            ))}
          </tbody>
          </table>
          
      </div>
    </div>
    )
}

export default MovieList;