javascript - 在 React 的单个组件中发送多个道具时遇到问题

Question

这是我的 app.js：

const App = () => {
const [ loading, setLoading ] = useState(false);
const [ filter, setFilter ] = useState(false);
  return (
    <div className="App">
      <Loader show={loading} />
      <Navbar active={filter} />
      <Main setLoading={setLoading} setFilter={setFilter} />
    </div>
  );
}

export default App;

这是我的 Navbar.js 组件：

const Navbar = ({active}) => {

    return (
        <div className={"filter-options" + (active ? " active" : "")}>
            <div className="filter-close">
                <i className="fa fa-close fa-2x" aria-hidden="true"></i>
            </div>
        </div>
    );
}

导出默认导航栏；

这是我的 Main.js 组件：

const Main = ({ setLoading, setFilter}) => {
    const [ images, setImages ] = useState([]);
    useEffect(() => {

        const getFeed = async () => {
            
            setLoading(true);
            const response = await fetch(`https://localhost/api/feed`);
            const data = await response.json();

            const results = data.data.results;
            setImages(results);
            setLoading(false);
        }

        getFeed();

    }, []);

    const showFilters = () => {
       setFilter(prevValue => !prevValue);
    }

        return (
                <Grid container spacing={2} className="media">
                    {
                        images.map((image, index) => {
                            return (
                                <Grid container item xs={6} sm={3} md={2} onClick={showFilters}>
                                    <ImageItem key={ `image_${ index }` } details={ image } />
                                </Grid>
                            );
                        })
                    }
                </Grid>
        );
}

export default Main;

问题是setFilter当用户单击元素时，传递给主组件的值似乎没有设置正确。每次单击时，它应该在真/假之间变化。

关于我可能错过的任何想法？

标签： javascriptreactjs